Components styles sourcemaps are not generated when…

Error message

Components styles sourcemaps are not generated when sourcemaps are hidden.

What it means

The Angular CLI warns that component-level CSS sourcemaps will not be generated when buildOptions.sourceMap.hidden is true. Hidden sourcemaps (.hidden = true) generate maps consumed only by error-reporting tools and are stripped from the bundle; for component CSS the CLI treats hidden maps as equivalent to no sourcemaps, so it disables componentsSourceMap rather than emitting useless output.

Solutions

If you need component style sourcemaps during debugging, use non-hidden maps: set "sourceMap": { "styles": true, "scripts": true } without hidden.
Keep hidden maps and accept no component CSS maps — hidden maps are intended for error reporting, not style debugging; the warning is informational.
Split configurations: a 'debug' configuration with full sourcemaps for local development and a 'monitoring' configuration with hidden maps for production.

Example fix

// before (angular.json)
"sourceMap": { "hidden": true }
// => warning: no component style sourcemaps

// after (when component css maps are needed)
"sourceMap": { "styles": true, "scripts": true }

Defensive patterns

Strategy: validation

Validate before calling

// Check angular.json sourceMap options before building
function hiddenMapsDisableComponentCss(opts) {
  const sm = opts.sourceMap;
  const hidden = typeof sm === 'object' ? !!sm.hidden : false;
  return hidden; // hidden maps never produce component style sourcemaps
}
if (hiddenMapsDisableComponentCss(options)) {
  console.warn('sourceMap.hidden is set: component CSS sourcemaps are not generated.');
}

Type guard

function usesHiddenSourceMaps(opts) {
  return typeof opts.sourceMap === 'object' && opts.sourceMap.hidden === true;
}

Try / catch

null

Prevention

Use sourceMap.hidden only for production error-monitoring builds; use plain sourceMap: true for debug builds.
Do not set both sourceMap.styles and sourceMap.hidden in one configuration — hidden suppresses component CSS maps.
Maintain separate configurations (debug vs monitoring) instead of toggling hidden on a shared profile.
Remember hidden maps are for error-reporting tools only; browser devtools will not show them.

When it happens

Trigger: getStylesConfig is called with cssSourceMap truthy AND buildOptions.sourceMap.hidden === true — i.e. angular.json has "sourceMap": { "hidden": true } (or styles enabled plus hidden) during ng build/ng serve.

Common situations: 1) Enabling hidden sourcemaps for Sentry/monitoring stack traces while still expecting component style maps. 2) Migrating from sourceMap: true to the hidden object form without realizing component CSS maps are dropped. 3) Template mistake: "sourceMap": { "styles": true, "hidden": true } in the same configuration.

Related errors

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

Appendix: source

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

    // 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());
  }

  const postCss = require('postcss');
  const postCssLoaderPath = require.resolve('postcss-loader');

  const componentStyleLoaders: RuleSetUseItem[] = [
    {

View on GitHub (pinned to bb72145f9a)