{"record":{"id":"15dce5bdea7af130","repo":"angular/angular-cli","slug":"components-styles-sourcemaps-are-not-generated-whe","errorCode":null,"errorMessage":"Components styles sourcemaps are not generated when styles optimization is enabled.","messagePattern":"Components styles sourcemaps are not generated when styles optimization is enabled\\.","errorType":"console","errorClass":null,"httpStatus":null,"severity":"warning","filePath":"packages/angular_devkit/build_angular/src/tools/webpack/configs/styles.ts","lineNumber":160,"sourceCode":"        ...extraPostcssPlugins,\n        autoprefixer({\n          ignoreUnknownVersions: true,\n          overrideBrowserslist: buildOptions.supportedBrowsers,\n        }),\n      ],\n    });\n    // 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());","sourceCodeStart":142,"sourceCodeEnd":178,"githubUrl":"https://github.com/angular/angular-cli/blob/bb72145f9ab45aee29f523236b3a25cd0813a841/packages/angular_devkit/build_angular/src/tools/webpack/configs/styles.ts#L142-L178","documentation":"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.","triggerScenarios":"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).","commonSituations":"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.","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."],"exampleFix":"// before (angular.json, configuration.production)\n\"optimization\": true,\n\"sourceMap\": true\n// => warning; component css sourcemaps skipped\n\n// after\n\"optimization\": { \"scripts\": true, \"styles\": { \"minify\": false, \"inlineCritical\": true }, \"fonts\": true },\n\"sourceMap\": true","handlingStrategy":"validation","validationCode":"// Validate the angular.json build/serve options before building\nfunction componentStyleMapsPossible(opts) {\n  const minify = typeof opts.optimization === 'object'\n    ? !!opts.optimization.styles?.minify\n    : !!opts.optimization; // optimization: true implies styles.minify\n  const wantsMaps = typeof opts.sourceMap === 'object'\n    ? !!opts.sourceMap.styles || !!opts.sourceMap\n    : !!opts.sourceMap;\n  return { wantsMaps, minify, conflict: wantsMaps && minify };\n}\nif (componentStyleMapsPossible(options).conflict) {\n  console.warn('Style minification is on: component style sourcemaps will be skipped.');\n}","typeGuard":"function hasStyleMinifyConflict(opts) {\n  const optimization = typeof opts.optimization === 'object' ? opts.optimization.styles : opts.optimization;\n  const minify = typeof optimization === 'object' ? optimization.minify : optimization;\n  const wantsStylesMap = typeof opts.sourceMap === 'object' ? opts.sourceMap.styles : opts.sourceMap;\n  return Boolean(minify) && Boolean(wantsStylesMap);\n}","tryCatchPattern":"null","preventionTips":["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."],"tags":["sourcemaps","optimization","minification","angular-cli","styles"],"backgroundTag":"optimization-sourcemap-conflict","analyzedSha":"bb72145f9ab45aee29f523236b3a25cd0813a841","analyzedAt":"2026-08-30T02:47:34.745Z","schemaVersion":2},"datasetVersion":"2026-08-30T03:17:51.788Z"}