CSS sourcemap files aren't produced

[JWess]

🐞 Bug report

Command (mark with an x)

• new
• build
• serve
• test
• e2e
• generate
• add
• update
• lint
• extract-i18n
• run
• config
• help
• version
• doc

Is this a regression?

I don't believe so, but I'm not for sure on that.

Description

When building with angular.json => { sourcemaps: true, optimization: true } (more specifically optimization.styles.minify: true), CSS sourcemap comments in main.*.js point to a non-existent *.component.css.map file:

/*sourceMappingURL=footer.component.css.map*/

The corresponding footer.component.css.map file is not created by the build.

Here is an example of an example app containing a FooterComponent built with four different optimization build settings in angular.json (but sourcemaps turned on in all four cases):

No footer.component.css.map file is ever created. When the app source code is viewed in Chrome Dev Tools, it tries and fails to load the non-existant CSS sourcemaps.

🔬 Minimal Reproduction

Build using angular.json:

{
  "sourcemaps": true,
  "optimization": true
}

🌍 Your Environment

Angular CLI: 13.2.6
Node: 16.14.0
Package Manager: npm 8.3.1
OS: win32 x64

Angular: 13.2.6
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, language-service, material, platform-browser
... platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1302.6
@angular-devkit/build-angular   13.2.6
@angular-devkit/core            13.2.6
@angular-devkit/schematics      13.2.6
@schematics/angular             13.2.6
rxjs                            7.5.5
typescript                      4.5.5

[alan-agius4]

Hi @JWess, that fact that the sourcemap is not generated is expected. See: #15238. However, the sourceMappingURL comment shouldn't be included.

[alan-agius4]

Hi @JWess,

I tried this locally and I wasn't able to replicate as for my case the sourceMappingURL wasn't generated. Can you please provide a reproduction?

return (
  (e.ɵfac = function (n) {
    return new (n || e)();
  }),
  (e.ɵcmp = qi({
    type: e,
    selectors: [["app-root"]],
    decls: 0,
    vars: 0,
    template: function (n, r) {},
    styles: ["a[_ngcontent-%COMP%]{color:#fff}"],
  })),
  e
);

[JWess]

@alan-agius4 I will try to recreate this in an online editor.

I took a look at https://github.com/angular/angular-cli/blob/master/packages/angular_devkit/build_angular/src/webpack/configs/styles.ts. It is a bit misleading to me that the sourcemap for global styles is still generated (styles.css.map), while component style sourcemaps are not generated. At the very least, it seems like the documentation should mention this. Or perhaps we need a separate config flag to turn global style sourcemaps on/off as opposed to component style sourcemaps?

[alan-agius4]

I took a look at https://github.com/angular/angular-cli/blob/master/packages/angular_devkit/build_angular/src/webpack/configs/styles.ts. It is a bit misleading to me that the sourcemap for global styles is still generated (styles.css.map), while component style sourcemaps are not generate

This is expected although I do agree with you that this is confusing. Let me bring it up with the team.

[JWess]

Hi @JWess,

I tried this locally and I wasn't able to replicate as for my case the sourceMappingURL wasn't generated. Can you please provide a reproduction?

return (
  (e.ɵfac = function (n) {
    return new (n || e)();
  }),
  (e.ɵcmp = qi({
    type: e,
    selectors: [["app-root"]],
    decls: 0,
    vars: 0,
    template: function (n, r) {},
    styles: ["a[_ngcontent-%COMP%]{color:#fff}"],
  })),
  e
);

I was FINALLY able to reproduce the issue using a freshly-generated app. Here are the very simple reproduction steps:

1. ng new repro-app
2. Change angular.json => production config to have { "sourceMap": true, "optimization": true }.
3. Add any CSS to app.component.css so that it's not empty.

[alan-agius4]

We have discussed this during our team meeting and we have determined that this is what needs to happen;

• Add warning during the build when optimizations and sourcemaps are able to notify the end user that components css sourcemaps will not be generated.
• Make an issue to add support for external CSS.