fix(@angular-devkit/build-angular): load component source maps inline… #11729

ajspera · 2018-07-31T22:27:42Z

… so they work

without this, the way styles are into the DOM breaks the default sourcemap option
postcss-loader option docs
https://github.com/postcss/postcss-loader#inline
fixes #9099

googlebot · 2018-07-31T22:27:45Z

Thanks for your pull request. It looks like this may be your first contribution to a Google open source project (if not, look below for help). Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

📝 Please visit https://cla.developers.google.com/ to sign.

Once you've signed (or fixed any issues), please reply here (e.g. I signed it!) and we'll verify it.

What to do if you already signed the CLA

Individual signers

It's possible we don't have your GitHub username or you're using a different email address on your commit. Check your existing CLA data and verify that your email is set on your git commits.

Corporate signers

Your company has a Point of Contact who decides which employees are authorized to participate. Ask your POC to be added to the group of authorized contributors. If you don't know who your Point of Contact is, direct the Google project maintainer to go/cla#troubleshoot (Public version).
The email used to register you as an authorized contributor must be the email used for the Git commit. Check your existing CLA data and verify that your email is set on your git commits.
The email used to register you as an authorized contributor must also be attached to your GitHub account.

ajspera · 2018-07-31T22:31:58Z

I signed it!

googlebot · 2018-07-31T22:32:01Z

CLAs look good, thanks!

clydin · 2018-07-31T23:35:54Z

packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/styles.ts

@@ -267,7 +267,7 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
            options: {
              ident: buildOptions.extractCss ? 'extracted' : 'embedded',
              plugins: postcssPluginCreator,
-              sourceMap: cssSourceMap
+              sourceMap: cssSourceMap ? 'inline' : false


I'm assuming based on the linked issue that you meant to change the source map configuration for component styles located here and not the global styles config.

Actually both are affected by the problem, but I had missed that there were 2 instances of postcss-loader. With each using 'inline' instead of a boolean, both the global maps and component maps are now working. I updated the commit and the commit message to reflect that.

If that is the case then the comment in this section is very relevant. style-loader 1.0 (unreleased) automatically handles the source maps in this regard. As a stopgap this appears to be an acceptable solution. However, if the global stylesheets are extracted, they should not contain inline source maps. The conditional in this case should set the value to true if source maps and extraction are enabled; inline if only source maps are enabled; and false otherwise.

I had thought about that, but when I tried ng build --source-map --extract-css without the inline sourcemaps, they did not work. The chrome inspector just referenced the generated css files. Looking a bit further, it does generate a map file for the styles, but there are no mappings to the scss files in it.

dist/styles.css.map

{"version":3,"sources":[],"names":[],"mappings":"","file":"styles.css","sourceRoot":""}

There may be another bug happening on top of this, although the always inline will resolve it as is until it's found. I suppose that's up to you whether you want extracted sourcemaps broken until it's found or supplement it as is (always inline if true) until then.

Extracted stylesheets should have working source maps. If they are not working that would be a separate issue. Altering the behavior for extracted souremaps in this way would be require a major version bump as end users may not realize the source maps are embedded resulting in the source being pushed unknowingly in production builds.

It will still only push source maps if --source-map is explicitly set, but I suppose your point may be relevant if people are building source maps and then manually pulling the map files from their build as part of a deployment process which I would consider unorthodox. I do agree that its a separate issue, but its also related to the referenced issue since it isn't completely resolved until the extracted scss source maps also work.

If you are willing to make the suggested change, we should be able to roll this into the next minor.

Cool, I should be able to get that in today. Just to confirm, the component styles are always injected inline via js even with extract-css, so the change just goes on the global styles, right?

The change is up.

ajspera · 2018-08-14T18:41:28Z

Sorry about the close and re-open. I had my gitlab account in my config when I rebased and reverting closed this. Everything should be good to go now, though, as long as the rebase fixed those failed tests.

…they work without this, the way styles are into the DOM breaks the default sourcemap option postcss-loader option docs https://github.com/postcss/postcss-loader#inline fixes angular#9099

ajspera · 2018-08-22T17:07:59Z

@clydin A couple of rebases later and the appveyor CI finally passed. All automated checks are good, just needing approval.

zuzusik · 2018-10-26T11:58:51Z

is it possible to port this to version 6.x?

angular-automatic-lock-bot · 2019-09-12T16:42:28Z

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.}

googlebot added the cla: no label Jul 31, 2018

googlebot added cla: yes and removed cla: no labels Jul 31, 2018

clydin reviewed Jul 31, 2018

View reviewed changes

ajspera force-pushed the fix-component-style-sourcemaps branch from 4e569e5 to 7ab661c Compare August 1, 2018 01:45

ajspera closed this Aug 14, 2018

ajspera force-pushed the fix-component-style-sourcemaps branch from 7ab661c to 84ec302 Compare August 14, 2018 17:06

ajspera reopened this Aug 14, 2018

ajspera force-pushed the fix-component-style-sourcemaps branch from f130a0d to ba22a3b Compare August 14, 2018 18:15

ajspera closed this Aug 14, 2018

ajspera force-pushed the fix-component-style-sourcemaps branch from ba22a3b to f46869d Compare August 14, 2018 18:18

ajspera reopened this Aug 14, 2018

ajspera force-pushed the fix-component-style-sourcemaps branch from 3e8992b to 50eb452 Compare August 14, 2018 18:30

fix(@angular-devkit/build-angular): load style source maps inline so …

7a0165c

…they work without this, the way styles are into the DOM breaks the default sourcemap option postcss-loader option docs https://github.com/postcss/postcss-loader#inline fixes angular#9099

ajspera force-pushed the fix-component-style-sourcemaps branch from 50eb452 to 7a0165c Compare August 22, 2018 16:14

clydin approved these changes Aug 22, 2018

View reviewed changes

clydin added the target: major This PR is targeted for the next major release label Aug 22, 2018

vikerman merged commit c66f831 into angular:master Aug 27, 2018

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 12, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(@angular-devkit/build-angular): load component source maps inline… #11729

fix(@angular-devkit/build-angular): load component source maps inline… #11729

ajspera commented Jul 31, 2018

googlebot commented Jul 31, 2018

ajspera commented Jul 31, 2018

googlebot commented Jul 31, 2018

clydin Jul 31, 2018

ajspera Aug 1, 2018

clydin Aug 1, 2018 •

edited

Loading

ajspera Aug 1, 2018

clydin Aug 1, 2018

ajspera Aug 1, 2018 •

edited

Loading

clydin Aug 14, 2018

ajspera Aug 14, 2018

clydin Aug 14, 2018

ajspera Aug 14, 2018

ajspera commented Aug 14, 2018

ajspera commented Aug 22, 2018

zuzusik commented Oct 26, 2018

angular-automatic-lock-bot bot commented Sep 12, 2019

fix(@angular-devkit/build-angular): load component source maps inline… #11729

fix(@angular-devkit/build-angular): load component source maps inline… #11729

Conversation

ajspera commented Jul 31, 2018

googlebot commented Jul 31, 2018

What to do if you already signed the CLA

Individual signers

Corporate signers

ajspera commented Jul 31, 2018

googlebot commented Jul 31, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

clydin Aug 1, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dist/styles.css.map

Choose a reason for hiding this comment

ajspera Aug 1, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ajspera commented Aug 14, 2018

ajspera commented Aug 22, 2018

zuzusik commented Oct 26, 2018

angular-automatic-lock-bot bot commented Sep 12, 2019

clydin Aug 1, 2018 •

edited

Loading

ajspera Aug 1, 2018 •

edited

Loading