AOT / Build — Naming Convention
Every pre-generated file follows a deterministic pattern so the AOT loader can resolve URLs without a manifest:
text
<base>.<width>q<quality>.<format>Examples
Original ngSrc | Width | Generated file |
|---|---|---|
/assets/hero.jpg | 750 | /assets/hero.750q90.webp |
/assets/hero.jpg | 1080 | /assets/hero.1080q90.webp |
/images/banner.png | 640 | /images/banner.640q80.avif |
Loader resolution
provideAotImageLoader({ format: 'webp', quality: 90 }) strips the original extension from ngSrc and appends .<width>q<quality>.<format> for each srcset entry Angular requests.
typescript
// assets/hero.jpg @ 1080px, quality 90, webp
// → /assets/hero.1080q90.webp
buildAotImageUrl('/assets/hero.jpg', 1080, 90, 'webp');Originals are kept The CLI writes new files alongside sources. In production the loader never requests the raw JPEG/PNG when
isDevMode is false.