SSR / Dynamic — Setup

SSR mode routes every optimized image through Express middleware. The client loader builds query URLs; Sharp processes them on demand and caches the result.

1. Application provider

Register the dynamic loader in app.config.ts:

typescript
import { ApplicationConfig } from '@angular/core';
import { provideImageOptimizerLoader } from 'ng-image-optimizer';

export const appConfig: ApplicationConfig = {
  providers: [
    provideImageOptimizerLoader({
      routePrefix: '/_ng/image',
    }),
  ],
};

2. Server middleware

Mount imageOptimizerHandler on your Express app before the Angular SSR handler and static file middleware:

typescript
import express from 'express';
import { join } from 'node:path';
import { imageOptimizerHandler } from 'ng-image-optimizer/server';

const browserDistFolder = join(import.meta.dirname, '../browser');
const app = express();

// Must be registered before static + SSR handlers
app.use('/_ng/image', imageOptimizerHandler(browserDistFolder, {}));

Request flow

  1. NgOptimizedImage calls the loader with src, width, and quality.
  2. The loader returns /_ng/image?url=…&w=…&q=….
  3. Middleware fetches the source, resizes with Sharp, converts format, and caches to disk.
Route prefix The default prefix is /_ng/image. If you change it in provideImageOptimizerLoader({ routePrefix: '…' }), use the same path in app.use(…) on the server.