{"record":{"id":"e8a5bcee89689858","repo":"angular/angular-cli","slug":"components-styles-sourcemaps-are-not-generated-whe-e8a5bc","errorCode":null,"errorMessage":"Components styles sourcemaps are not generated when sourcemaps are hidden.","messagePattern":"Components styles sourcemaps are not generated when sourcemaps are hidden\\.","errorType":"console","errorClass":null,"httpStatus":null,"severity":"warning","filePath":"packages/angular_devkit/build_angular/src/tools/webpack/configs/styles.ts","lineNumber":167,"sourceCode":"    // postcss-loader fails when trying to determine configuration files for data URIs\n    optionGenerator.config = false;\n\n    return optionGenerator;\n  };\n\n  let componentsSourceMap = !!cssSourceMap;\n  if (cssSourceMap) {\n    if (buildOptions.optimization.styles.minify) {\n      // Never use component css sourcemap when style optimizations are on.\n      // It will just increase bundle size without offering good debug experience.\n      logger.warn(\n        'Components styles sourcemaps are not generated when styles optimization is enabled.',\n      );\n      componentsSourceMap = false;\n    } else if (buildOptions.sourceMap.hidden) {\n      // Inline all sourcemap types except hidden ones, which are the same as no sourcemaps\n      // for component css.\n      logger.warn('Components styles sourcemaps are not generated when sourcemaps are hidden.');\n      componentsSourceMap = false;\n    }\n  }\n\n  // extract global css from js files into own css file.\n  extraPlugins.push(new MiniCssExtractPlugin({ filename: `[name]${hashFormat.extract}.css` }));\n\n  if (!buildOptions.hmr) {\n    // don't remove `.js` files for `.css` when we are using HMR these contain HMR accept codes.\n    // suppress empty .js files in css only entry points.\n    extraPlugins.push(new SuppressExtractedTextChunksWebpackPlugin());\n  }\n\n  const postCss = require('postcss');\n  const postCssLoaderPath = require.resolve('postcss-loader');\n\n  const componentStyleLoaders: RuleSetUseItem[] = [\n    {","sourceCodeStart":149,"sourceCodeEnd":185,"githubUrl":"https://github.com/angular/angular-cli/blob/bb72145f9ab45aee29f523236b3a25cd0813a841/packages/angular_devkit/build_angular/src/tools/webpack/configs/styles.ts#L149-L185","documentation":"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.","triggerScenarios":"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.","commonSituations":"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.","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."],"exampleFix":"// before (angular.json)\n\"sourceMap\": { \"hidden\": true }\n// => warning: no component style sourcemaps\n\n// after (when component css maps are needed)\n\"sourceMap\": { \"styles\": true, \"scripts\": true }","handlingStrategy":"validation","validationCode":"// Check angular.json sourceMap options before building\nfunction hiddenMapsDisableComponentCss(opts) {\n  const sm = opts.sourceMap;\n  const hidden = typeof sm === 'object' ? !!sm.hidden : false;\n  return hidden; // hidden maps never produce component style sourcemaps\n}\nif (hiddenMapsDisableComponentCss(options)) {\n  console.warn('sourceMap.hidden is set: component CSS sourcemaps are not generated.');\n}","typeGuard":"function usesHiddenSourceMaps(opts) {\n  return typeof opts.sourceMap === 'object' && opts.sourceMap.hidden === true;\n}","tryCatchPattern":"null","preventionTips":["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."],"tags":["sourcemaps","hidden-sourcemaps","angular-cli","styles","configuration"],"backgroundTag":"hidden-sourcemap-limitation","analyzedSha":"bb72145f9ab45aee29f523236b3a25cd0813a841","analyzedAt":"2026-08-30T02:47:34.745Z","schemaVersion":2},"datasetVersion":"2026-08-30T03:17:51.788Z"}