Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CSS sourcemap files aren't produced #22834

Closed
1 of 15 tasks
JWess opened this issue Mar 12, 2022 · 12 comments · Fixed by #24200
Closed
1 of 15 tasks

CSS sourcemap files aren't produced #22834

JWess opened this issue Mar 12, 2022 · 12 comments · Fixed by #24200

Comments

@JWess
Copy link

JWess commented Mar 12, 2022

🐞 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):

image

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
Copy link
Collaborator

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

@alan-agius4
Copy link
Collaborator

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
);

@alan-agius4 alan-agius4 added the needs: more info Reporter must clarify the issue label Mar 14, 2022
@JWess
Copy link
Author

JWess commented Mar 14, 2022

@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?

image

@alan-agius4
Copy link
Collaborator

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
Copy link
Author

JWess commented Mar 14, 2022

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
Copy link
Collaborator

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.

@ngbot ngbot bot modified the milestone: needsTriage Mar 15, 2022
@alan-agius4 alan-agius4 added the freq1: low Only reported by a handful of users who observe it rarely label Mar 15, 2022
@ngbot ngbot bot modified the milestones: needsTriage, Backlog Mar 15, 2022
@JWess
Copy link
Author

JWess commented Mar 15, 2022

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.

Thanks for the report! When you say "add support for external CSS", that refers to what exactly? Will you be creating that Issue? Thanks again for your prompt effort on all of this.

@alan-agius4
Copy link
Collaborator

Basically what it means is, add support for CSS sourcemaps for components when optimization is enabled which can be done by instead of inline sourcemaps as base64 in the JS file we emit the sourcemap as an external file.

I'll be opening the feature request issue in the next couple of days.

@JWess
Copy link
Author

JWess commented Apr 4, 2022

Basically what it means is, add support for CSS sourcemaps for components when optimization is enabled which can be done by instead of inline sourcemaps as base64 in the JS file we emit the sourcemap as an external file.

I'll be opening the feature request issue in the next couple of days.

Did this feature request issue ever get created?

@JWess
Copy link
Author

JWess commented Oct 10, 2022

@alan-agius4 Did this get lost in the shuffle?

@alan-agius4
Copy link
Collaborator

Hi @JWess, sorry for the delay.
I just created a opening the feature request #24049.

alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue Nov 8, 2022

Partially verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
We cannot verify signatures from co-authors, and some of the co-authors attributed to this commit require their commits to be signed.
…emaps are not generated when styles optimization is enabled

With this change we add a warning to inform the users that sourcemaps are not generated when both styles sourcemaps and optimization are enabled. This is because component style sourcemaps are inline which would drastically increase the bundle size.

Closes angular#22834
alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue Nov 8, 2022
…emaps are not generated when styles optimization is enabled

With this change we add a warning to inform the users that sourcemaps are not generated when both styles sourcemaps and optimization are enabled. This is because component style sourcemaps are inline which would drastically increase the bundle size.

Closes angular#22834
alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue Nov 8, 2022
…emaps are not generated when styles optimization is enabled

With this change we add a warning to inform the users that sourcemaps are not generated when both styles sourcemaps and optimization are enabled. This is because component style sourcemaps are inline which would drastically increase the bundle size.

Closes angular#22834
alan-agius4 added a commit that referenced this issue Nov 8, 2022
…emaps are not generated when styles optimization is enabled

With this change we add a warning to inform the users that sourcemaps are not generated when both styles sourcemaps and optimization are enabled. This is because component style sourcemaps are inline which would drastically increase the bundle size.

Closes #22834
alan-agius4 added a commit that referenced this issue Nov 8, 2022
…emaps are not generated when styles optimization is enabled

With this change we add a warning to inform the users that sourcemaps are not generated when both styles sourcemaps and optimization are enabled. This is because component style sourcemaps are inline which would drastically increase the bundle size.

Closes #22834

(cherry picked from commit c83aaed)
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Dec 9, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
2 participants