Components styles sourcemaps are not generated when styles o

Error message

Components styles sourcemaps are not generated when styles optimization is enabled.

What it means

The Angular CLI warns that per-component CSS sourcemaps cannot be produced while style minification (optimization.styles.minify) is enabled. Minified CSS output makes component sourcemaps large and of little debugging value, so the CLI deliberately disables component sourcemaps (componentsSourceMap = false) instead of emitting misleading maps. Global styles sourcemaps are unaffected.

Source

Thrown at packages/angular_devkit/build_angular/src/tools/webpack/configs/styles.ts:160

        ...extraPostcssPlugins,
        autoprefixer({
          ignoreUnknownVersions: true,
          overrideBrowserslist: buildOptions.supportedBrowsers,
        }),
      ],
    });
    // postcss-loader fails when trying to determine configuration files for data URIs
    optionGenerator.config = false;

    return optionGenerator;
  };

  let componentsSourceMap = !!cssSourceMap;
  if (cssSourceMap) {
    if (buildOptions.optimization.styles.minify) {
      // Never use component css sourcemap when style optimizations are on.
      // It will just increase bundle size without offering good debug experience.
      logger.warn(
        'Components styles sourcemaps are not generated when styles optimization is enabled.',
      );
      componentsSourceMap = false;
    } else if (buildOptions.sourceMap.hidden) {
      // Inline all sourcemap types except hidden ones, which are the same as no sourcemaps
      // for component css.
      logger.warn('Components styles sourcemaps are not generated when sourcemaps are hidden.');
      componentsSourceMap = false;
    }
  }

  // extract global css from js files into own css file.
  extraPlugins.push(new MiniCssExtractPlugin({ filename: `[name]${hashFormat.extract}.css` }));

  if (!buildOptions.hmr) {
    // don't remove `.js` files for `.css` when we are using HMR these contain HMR accept codes.
    // suppress empty .js files in css only entry points.
    extraPlugins.push(new SuppressExtractedTextChunksWebpackPlugin());

View on GitHub (pinned to bb72145f9a)

Solutions

To get component style sourcemaps, disable style minification: set optimization.styles.minify to false in the build configuration.
Alternatively build in development mode (ng build --configuration development) where optimization is off by default.
If you only need global styles sourcemaps, keep optimization on and ignore the warning — global styles sourcemaps are still generated.
If maps are only wanted for CI/analysis without minification concerns, use a dedicated configuration with optimization.styles.minify=false and sourceMap.styles=true.

Example fix

// before (angular.json, configuration.production)
"optimization": true,
"sourceMap": true
// => warning; component css sourcemaps skipped

// after
"optimization": { "scripts": true, "styles": { "minify": false, "inlineCritical": true }, "fonts": true },
"sourceMap": true

Defensive patterns

Strategy: validation

Validate before calling

// Validate the angular.json build/serve options before building
function componentStyleMapsPossible(opts) {
  const minify = typeof opts.optimization === 'object'
    ? !!opts.optimization.styles?.minify
    : !!opts.optimization; // optimization: true implies styles.minify
  const wantsMaps = typeof opts.sourceMap === 'object'
    ? !!opts.sourceMap.styles || !!opts.sourceMap
    : !!opts.sourceMap;
  return { wantsMaps, minify, conflict: wantsMaps && minify };
}
if (componentStyleMapsPossible(options).conflict) {
  console.warn('Style minification is on: component style sourcemaps will be skipped.');
}

Type guard

function hasStyleMinifyConflict(opts) {
  const optimization = typeof opts.optimization === 'object' ? opts.optimization.styles : opts.optimization;
  const minify = typeof optimization === 'object' ? optimization.minify : optimization;
  const wantsStylesMap = typeof opts.sourceMap === 'object' ? opts.sourceMap.styles : opts.sourceMap;
  return Boolean(minify) && Boolean(wantsStylesMap);
}

Try / catch

null

Prevention

Never combine sourceMap.styles with optimization.styles.minify in the same angular.json configuration.
Use the development configuration (optimization off) whenever you need to debug component CSS.
Keep production and debug options in separate named configurations instead of overriding with CLI flags.
Document in the team README that component CSS maps require style minification to be off.

When it happens

Trigger: getStylesConfig is called with cssSourceMap truthy (buildOptions.sourceMap styles enabled) AND buildOptions.optimization.styles.minify is true — e.g. sourceMap: true combined with optimization.styles (which is implied by production configuration).

Common situations: 1) Production build where the user set sourceMap: true expecting component style debugging. 2) A custom configuration enabling both sourceMap.styles and optimization.styles.minify. 3) Copying a development sourceMap option into a production profile. 4) CI builds with --source-map flags layered over production defaults.

Related errors

AI-assisted analysis of angular/angular-cli@bb72145f9a (2026-08-30). Data as JSON: /api/errors/15dce5bdea7af130. Report an issue: GitHub.