In Angular's application builder, what do `optimization`, `sourceMap`, `outputHashing` and `namedChunks` control, and how do production and development builds set them?

middlemust knowfreq 55%

answer

minify, tree-shake, inline critical CSS
maps for scripts and styles
none, all, media, bundles
chunk-[hash] vs [name]-[hash]
schema defaults vs configuration overrides

basics

~20 s

optimization minifies, tree-shakes and inlines critical CSS and fonts; sourceMap emits maps; outputHashing hashes file names; namedChunks names lazy chunks. Production keeps optimization on, maps off and hashing all; development turns optimization off and maps on.

solid answer

~40 s

All four are options of @angular/build:application. optimization (default true) can be a boolean or an object: scripts for minification and dead-code removal, styles with minify, inlineCritical and removeSpecialComments, and fonts with inline. sourceMap (default false) can also be an object: scripts, styles, hidden, vendor, sourcesContent. outputHashing (default none) accepts none, all, media or bundles, and decides whether entry bundles such as main-<hash>.js and media files get content hashes. namedChunks (default false) switches lazy chunk names from chunk-<hash>.js to <name>-<hash>.js. A generated project's production configuration relies on the defaults and adds outputHashing: 'all'. The development configuration sets optimization: false, sourceMap: true and extractLicenses: false.

All four are options of `@angular/build:application`. `optimization` (default `true`) can be a boolean or an object: `scripts` for minification and dead-code removal, `styles` with `minify`, `inlineCritical` and `removeSpecialComments`, and `fonts` with `inline`. `sourceMap` (default `false`) can also be an object: `scripts`, `styles`, `hidden`, `vendor`, `sourcesContent`. `outputHashing` (default `none`) accepts `none`, `all`, `media` or `bundles`, and decides whether entry bundles such as `main-<hash>.js` and media files get content hashes. `namedChunks` (default `false`) switches lazy chunk names from `chunk-<hash>.js` to `<name>-<hash>.js`. A generated project's production configuration relies on the defaults and adds `outputHashing: 'all'`. The development configuration sets `optimization: false`, `sourceMap: true` and `extractLicenses: false`.

code

json · 13 lines

json

"configurations": {
  "production": {
    "outputHashing": "all",
    "optimization": { "scripts": true, "styles": { "minify": true, "inlineCritical": false }, "fonts": true },
    "sourceMap": { "scripts": true, "styles": false, "hidden": true }
  },
  "development": {
    "optimization": false,
    "extractLicenses": false,
    "sourceMap": true,
    "namedChunks": true
  }
}

go deeper

for a junior

Know that production builds are minified and use hashed file names, while development builds keep source maps and readable code.

for a middle

Explain each option's default, its object form, the four outputHashing values, and what the generated production and development configurations change.

for a senior

Tune these per environment for caching, debugging and CSP compatibility, and know the interactions such as HMR switching off when outputHashing hashes bundles.

for a principal

Set organisation-wide build policies (caching strategy, source-map handling, license extraction) and decide which options teams may override.

Where these options live

They are options of the application builder, @angular/build:application, set in the build target of angular.json. They go either in the target's options (applies to every configuration) or inside a named configuration such as production or development, which overrides them. Each can also be overridden on the command line, for example ng build --source-map.

`optimization`

Default: true. The boolean switches everything on or off. The object form lets you tune parts:

scripts: minification, tree-shaking and dead-code elimination of JavaScript;
styles: true/false, or an object with minify, inlineCritical (extract the CSS needed for first paint and inline it into index.html) and removeSpecialComments (drop /*! ... */ and @license comments from global CSS);
fonts: true/false, or { inline }, which inlines external web-font CSS definitions referenced from index.html to cut render-blocking requests. It needs internet access at build time, and HTTPS_PROXY can route it.

A common production tweak is "optimization": { "scripts": true, "styles": { "minify": true, "inlineCritical": false }, "fonts": true }, used when critical-CSS inlining does not fit a strict Content Security Policy.

`sourceMap`

Default: false. The object form has:

scripts and styles, which maps to emit (both default true once the object is used);
hidden, which emits .map files without the //# sourceMappingURL comment, so browsers do not fetch them but error-reporting tools can use them;
vendor, which resolves source maps of third-party packages too (default false);
sourcesContent, which embeds the original source text in the map (default true).

`outputHashing`

Default: none. The values decide which output file names get a content hash:

Value	Entry bundles (`main`, `polyfills`, `styles`)	Media referenced from CSS
`none`	`main.js`	`media/logo.png`
`bundles`	`main-<hash>.js`	`media/logo.png`
`media`	`main.js`	`media/logo-<hash>.png`
`all`	`main-<hash>.js`	`media/logo-<hash>.png`

Lazy chunks are always named with a hash, whatever this option says. Hashed names change when content changes, so a server can send long-lived cache headers for them while index.html stays uncached.

`namedChunks`

Default: false. Lazy chunks are emitted as chunk-<hash>.js. With namedChunks: true they become <name>-<hash>.js, with the name derived from the source file. That makes network panels and bundle reports easier to read at the cost of exposing file names. Teams usually enable it only in development or for a one-off investigation.

How the generated configurations use them

production (the build target's defaultConfiguration): only outputHashing: 'all' and budgets are written, so optimization: true, sourceMap: false, namedChunks: false and extractLicenses: true (third-party licenses go to a separate file) all come from the schema defaults.
development (used by ng serve): optimization: false, sourceMap: true, extractLicenses: false. outputHashing stays none, which also keeps HMR working, because the dev server disables HMR when outputHashing is all or bundles.

Reading the output folder

After a default production ng build, dist/<project>/browser typically contains:

index.html, which references the hashed entry files;
main-<hash>.js, and polyfills-<hash>.js when the app has polyfills (zoneless apps may have none);
styles-<hash>.css for the global stylesheets;
chunk-<hash>.js files for lazy routes and deferred code;
a media/ folder for fonts and images referenced from CSS, hashed under all or media;
files copied from the assets option, such as the contents of public/, which keep their names.

With extractLicenses on, third-party license notices are collected into a separate 3rdpartylicenses.txt file instead of staying in the bundles. A development build written to disk (ng build --configuration development) shows the contrast: main.js, readable code and a .map next to each bundle.

Mistakes worth naming

Turning sourceMap: true on in production and deploying the .map files publicly, when hidden plus an upload step was intended.
Setting outputHashing: 'none' in production and then fighting stale caches after each release.
Expecting namedChunks: false to produce unhashed chunk names; lazy chunks are hashed either way.
Disabling optimization entirely to debug one problem, instead of turning on source maps for an optimized build.

## Where these options live They are options of the **application builder**, `@angular/build:application`, set in the `build` target of `angular.json`. They go either in the target's `options` (applies to every configuration) or inside a named configuration such as `production` or `development`, which overrides them. Each can also be overridden on the command line, for example `ng build --source-map`. ## `optimization` Default: `true`. The boolean switches everything on or off. The object form lets you tune parts: - `scripts`: minification, tree-shaking and dead-code elimination of JavaScript; - `styles`: `true`/`false`, or an object with `minify`, `inlineCritical` (extract the CSS needed for first paint and inline it into `index.html`) and `removeSpecialComments` (drop `/*! ... */` and `@license` comments from global CSS); - `fonts`: `true`/`false`, or `{ inline }`, which inlines external web-font CSS definitions referenced from `index.html` to cut render-blocking requests. It needs internet access at build time, and `HTTPS_PROXY` can route it. A common production tweak is `"optimization": { "scripts": true, "styles": { "minify": true, "inlineCritical": false }, "fonts": true }`, used when critical-CSS inlining does not fit a strict Content Security Policy. ## `sourceMap` Default: `false`. The object form has: - `scripts` and `styles`, which maps to emit (both default `true` once the object is used); - `hidden`, which emits `.map` files *without* the `//# sourceMappingURL` comment, so browsers do not fetch them but error-reporting tools can use them; - `vendor`, which resolves source maps of third-party packages too (default `false`); - `sourcesContent`, which embeds the original source text in the map (default `true`). ## `outputHashing` Default: `none`. The values decide which output file names get a content hash: | Value | Entry bundles (`main`, `polyfills`, `styles`) | Media referenced from CSS | |---|---|---| | `none` | `main.js` | `media/logo.png` | | `bundles` | `main-<hash>.js` | `media/logo.png` | | `media` | `main.js` | `media/logo-<hash>.png` | | `all` | `main-<hash>.js` | `media/logo-<hash>.png` | Lazy chunks are always named with a hash, whatever this option says. Hashed names change when content changes, so a server can send long-lived cache headers for them while `index.html` stays uncached. ## `namedChunks` Default: `false`. Lazy chunks are emitted as `chunk-<hash>.js`. With `namedChunks: true` they become `<name>-<hash>.js`, with the name derived from the source file. That makes network panels and bundle reports easier to read at the cost of exposing file names. Teams usually enable it only in development or for a one-off investigation. ## How the generated configurations use them 1. **production** (the `build` target's `defaultConfiguration`): only `outputHashing: 'all'` and budgets are written, so `optimization: true`, `sourceMap: false`, `namedChunks: false` and `extractLicenses: true` (third-party licenses go to a separate file) all come from the schema defaults. 2. **development** (used by `ng serve`): `optimization: false`, `sourceMap: true`, `extractLicenses: false`. `outputHashing` stays `none`, which also keeps HMR working, because the dev server disables HMR when `outputHashing` is `all` or `bundles`. ## Reading the output folder After a default production `ng build`, `dist/<project>/browser` typically contains: - `index.html`, which references the hashed entry files; - `main-<hash>.js`, and `polyfills-<hash>.js` when the app has polyfills (zoneless apps may have none); - `styles-<hash>.css` for the global stylesheets; - `chunk-<hash>.js` files for lazy routes and deferred code; - a `media/` folder for fonts and images referenced from CSS, hashed under `all` or `media`; - files copied from the `assets` option, such as the contents of `public/`, which keep their names. With `extractLicenses` on, third-party license notices are collected into a separate `3rdpartylicenses.txt` file instead of staying in the bundles. A development build written to disk (`ng build --configuration development`) shows the contrast: `main.js`, readable code and a `.map` next to each bundle. ## Mistakes worth naming - Turning `sourceMap: true` on in production and deploying the `.map` files publicly, when `hidden` plus an upload step was intended. - Setting `outputHashing: 'none'` in production and then fighting stale caches after each release. - Expecting `namedChunks: false` to produce unhashed chunk names; lazy chunks are hashed either way. - Disabling `optimization` entirely to debug one problem, instead of turning on source maps for an optimized build.

Why does a production build usually use `outputHashing: 'all'` rather than `bundles`?
`all` hashes both the JavaScript/CSS bundles and the media files referenced from CSS (fonts, images in `url()`). With `bundles`, a changed image keeps the same `media/` file name, and a long-lived cache can keep serving the old one. Hashing everything lets every asset except `index.html` be cached indefinitely.
When would you set `optimization.styles.inlineCritical` to `false`?
Critical-CSS inlining puts the rules for the first viewport into `index.html` and loads the rest of the stylesheet asynchronously with a small inserted script. Under a strict Content Security Policy that script needs a nonce, which the Angular security guide says rules out the `CSP_NONCE` token. Turning inlining off keeps minification but loads stylesheets normally.
Does `namedChunks: false` mean lazy chunks are unhashed in development?
No. Lazy chunks are always named `chunk-<hash>.js` by default, independent of `outputHashing`. `namedChunks` only swaps the generic `chunk` prefix for a name derived from the source file, which helps when reading the network panel.

saying these in an interview costs you the question

Thinks optimization is off by default and must be enabled for production
Believes outputHashing none means lazy chunks are also unhashed
Ships public source maps when hidden maps plus upload were intended
Says namedChunks controls whether lazy chunks are split out at all
Assumes the production configuration explicitly lists every option it uses

In Angular's application builder, what do `optimization`, `sourceMap`, `outputHashing` and `namedChunks` control, and how do production and development builds set them?

§ answer

basics

solid answer

code

§ go deeper

▾level notes4 levels

▾deep dive~3 min

Where these options live

optimization

sourceMap

outputHashing

namedChunks

How the generated configurations use them

Reading the output folder

Mistakes worth naming

▾common follow-ups3 questions

▾red flags5 flags

Where these options live

optimization

sourceMap

outputHashing

namedChunks

How the generated configurations use them

Reading the output folder

Mistakes worth naming

answer

go deeper

`optimization`

`sourceMap`

`outputHashing`

`namedChunks`

`optimization`

`sourceMap`

`outputHashing`

`namedChunks`