angular/angular-cli · warning

Components styles sourcemaps are not generated when sourcema

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.

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)

Solutions

1. If you need component style sourcemaps during debugging, use non-hidden maps: set "sourceMap": { "styles": true, "scripts": true } without hidden.
2. Keep hidden maps and accept no component CSS maps — hidden maps are intended for error reporting, not style debugging; the warning is informational.
3. 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 }

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

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

null

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

• Components styles sourcemaps are not generated when styles o
• Unsupported package manager: "${name}"
• The configured package manager, '${this.descriptor.binary}',
• Project "${project}" does not exist.
• Project target does not exist.

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