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.

Sign up for GitHub

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

Jump to bottom

Angular Universal build includes Source Maps from Component CSS/SCSS in built .html #12940

Closed
visurel opened this issue Nov 12, 2018 · 7 comments · Fixed by #13117
Closed

Angular Universal build includes Source Maps from Component CSS/SCSS in built .html #12940

visurel opened this issue Nov 12, 2018 · 7 comments · Fixed by #13117
Labels
area: devkit/build-angular freq1: low Only reported by a handful of users who observe it rarely severity5: regression type: bug/fix
Milestone
Backlog

Comments

@visurel
Copy link

visurel commented Nov 12, 2018

Bug Report or Feature Request (mark with an x)

- [x] bug report -> please search issues before submitting
- [ ] feature request

Command (mark with an x)

- [ ] new
- [x] build
- [x] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Versions

Angular CLI: 7.0.4
Node: 8.12.0
OS: win32 x64 / Windows 10
Angular: 7.0.3
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, platform-server, router

Package Version

@angular-devkit/architect 0.10.4
@angular-devkit/build-angular 0.10.4
@angular-devkit/build-optimizer 0.10.4
@angular-devkit/build-webpack 0.10.4
@angular-devkit/core 7.0.4
@angular-devkit/schematics 7.0.4
@angular/cli 7.0.4
@ngtools/webpack 7.0.4
@schematics/angular 7.0.4
@schematics/update 0.10.4
rxjs 6.3.3
typescript 3.1.6
webpack 4.19.1

Repro steps

Minimal Reproduction in repo: https://github.com/visurel/angular-universal-issue-repro
Run npm run build:ssr && npm run serve:ssr and check the source code of the localhost:4000 result.

The log given by the failure

   <!DOCTYPE html><html lang="en"><head>
    --  --
       <meta charset="utf-8">
       <title>NgUniversalDemo</title>
       <base href="/">
        
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <link rel="icon" type="image/x-icon" href="favicon.ico">
       <link rel="stylesheet" href="styles.5f175451ae854810fe6d.css"><style ng-transition="my-app">
       /*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsImZpbGUiOiJzcmMvYXBwL3Rlc3QvdGVzdC5jb21wb25lbnQuY3NzIn0= */</style></head>
   <body>
   <app-root ng-version="7.0.3"><h1>Universal Demo using Angular and Angular CLI</h1><a routerlink="/" href="/">Home</a><a routerlink="/lazy" href="/lazy">Lazy</a><a routerlink="/lazy/nested" href="/lazy/nested">Lazy_Nested</a><router-outlet></router-outlet><app-test _nghost-sc0=""><div _ngcontent-sc0="">
       hall
       </div></app-test></app-root>
   <script type="text/javascript" src="runtime.87662e477a0bb4d498e6.js"></script><script type="text/javascript" src="polyfills.3252f90364ffcd9d8845.js"></script><script type="text/javascript" src="main.d6d624e8c60a1e81f198.js"></script>
    
   <script id="my-app-state" type="application/json">{}</script></body></html>

Desired functionality

After upgrading from Angular 6 to Angular 7 I noticed sourceMaps from CSS/SCSS encoded in base64 get added to the Angular Universal build results. Above is the output with a single .css file for a component. When having dozens of components, these sourceMaps get huge and increase .html size unnecessarily.

I'd like to remove these sourceMappingURL=data:application/json;base64 blocks from my Universal builds.

Mention any other details that might be useful
@ngbot ngbot bot added this to the needsTriage milestone Nov 12, 2018
@alan-agius4 alan-agius4 added freq1: low Only reported by a handful of users who observe it rarely type: bug/fix severity5: regression labels Nov 12, 2018
@ngbot ngbot bot modified the milestones: needsTriage, Backlog Nov 12, 2018
@gorkemyontem
Copy link

I have the same problem. I can confirmed that "sourceMap": false option in angular.json does not work when your stack is Angular 7.0.1 + Universal + SCSS. It causes bigger bundle size and poor performance in production.

@alan-agius4
Copy link
Collaborator

Hi, taking a look at the reproduction.

You are not specifying sourceMaps to false. https://github.com/visurel/angular-universal-issue-repro/blob/f3e7b4e22b9961ca7917808664243e0365036335/angular.json#L109-L126 Adding sourceMap: false, doesn't generate any sourceMap.

That said this is a bug and we should not output source maps in inline styles, as they are unusable.

@alan-agius4 alan-agius4 mentioned this issue Nov 14, 2018
Closed
@gorkemyontem
Copy link

Hi Alan,
For server settings (where you have highlighted) adding
"sourceMap": false fixed the issue for me. But again like you said there is a bug since it wasn't the case for angular 6.

Thank you very much!

@alan-agius4
Copy link
Collaborator

alan-agius4 commented Nov 15, 2018 •
edited

Actually thinking about it, we should probably have sourcemaps for non bootstrapped apps.

That said, it’s a bummer if you want to enable sourcemaps to have better stack traces in your error reporter. But this applies also for the client bundle as component styles sourcemaps are always embedded.

@alan-agius4 alan-agius4 added the needs: discussion On the agenda for team meeting to determine next steps label Nov 15, 2018
@hansl
Copy link
Contributor

hansl commented Nov 15, 2018

Keeping need: further discussion for now and we should evaluate what we want for universal for v8, as any changes here would be a breaking change.

@alan-agius4 alan-agius4 mentioned this issue Dec 3, 2018
Merged
mgechev pushed a commit that referenced this issue Dec 14, 2018
@alan-agius4 @mgechev
fix(@schematics/angular): set optimization and sourceMap in unive…
17ba2bc 
…rsal production config

- When using Universal sourceMaps should not be enabled or at least `styles` sourceMaps should be disabled as these will otherwise be inlined and will be set as apart of the server side rendered page.

- While there is no benefit to optimize the scripts at server level, styles should always be minified so that the server side rendered page is smaller.

Fixes #12541 and Fixes #12940
@hansl hansl removed needs: discussion On the agenda for team meeting to determine next steps labels Jan 24, 2019
@inorganik
Copy link

I had this:

projects": {
    "myProjectName": {
      ...
      "architect": {
        "build": {
          ...
          "configurations": {
            "production": {
              ...
              "sourceMap": false,
              ...
          }
          "serve": { ... }
          ...

but you need to include it under "server"

projects": {
    "myProjectName": {
      ...
      "architect": {
        "build": { ... },
         ...
        "server": {
          ...
          "configurations": {
            "production": {
              ...
              "sourceMap": false,
              ...

that fixed it for me.

@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 Sep 9, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
area: devkit/build-angular freq1: low Only reported by a handful of users who observe it rarely severity5: regression type: bug/fix
Projects
None yet
Milestone
Backlog
5 participants
@inorganik @hansl @visurel @gorkemyontem @alan-agius4