Angular-cli: Angular Universal build includes Source Maps from Component CSS/SCSS in built .html

Created on 12 Nov 2018 · 7Comments · Source: angular/angular-cli

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

devkibuild-angular low regression bufix

Source

visurel

👍6

Most helpful comment

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.

inorganik on 6 Mar 2019

👍4

All 7 comments

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.

gorkemyontem on 13 Nov 2018

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 on 14 Nov 2018

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!

gorkemyontem on 14 Nov 2018

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 on 15 Nov 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.

hansl on 15 Nov 2018

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.

inorganik on 6 Mar 2019

👍4

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