AOT / Build — Setup

AOT mode pre-generates optimized variants at build time. At runtime the loader resolves directly to static files — no Sharp, no middleware.

1. Application provider

typescript

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

export const appConfig: ApplicationConfig = {
  providers: [
    provideAotImageLoader({
      format: 'webp',
      quality: 90,
    }),
  ],
};

In development (isDevMode()), the loader returns the original src so you can work without running the CLI on every save.

2. Postbuild CLI

Run after ng build so variants exist in the dist folder:

bash

ng-image-optimizer-aot \
  --dist ./dist/my-app/browser \
  --paths "assets/**" \
  --format webp \
  --quality 90

3. Wire into package.json

The ng add --mode=AOT schematic adds an optimize:image script. A typical production pipeline:

json

{
  "scripts": {
    "build": "ng build",
    "build:prod": "ng build && npm run optimize:image",
    "optimize:image": "ng-image-optimizer-aot --dist dist/my-app/browser"
  }
}

Match optionsformat and quality in provideAotImageLoader must match the CLI --format and --quality flags, or URLs will 404.