Installation

Prerequisites

  • Node.js (v18+)
  • Angular CLI
  • Angular SSR

Quick Start

The fastest way to get started is using our automated schematic:

bash
ng add ng-image-optimizer

Manual Setup

If you prefer to configure things manually, first install the library and its peer dependencies:

bash
npm install ng-image-optimizer sharp

2. Verify Configuration

The schematic automatically configures the Angular Application and your Express server. However, you can verify it manually:

Application Configuration (app.config.ts)

Ensure the provider function is added to your app config to register the custom optimized image loader:

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

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

Server Middleware (server.ts)

The optimizer works as an Express middleware intercepting paths (defaulting to /_ng/image).

typescript
import express from 'express';
import { imageOptimizerHandler } from 'ng-image-optimizer/server';

const app = express();

// Set up the optimizer middleware BEFORE Angular SSR handlers
app.get('/_ng/image', imageOptimizerHandler(browserDistFolder, {
  // Optional custom configuration overrides
  minimumCacheTTL: 60 * 60 * 24 // 24 hours
}));