Angular-cli: ng build --prod still does NOT minify / uglify / remove comments using angular-cli 9 (and 8)

Created on 26 Apr 2020 · 14Comments · Source: angular/angular-cli

🐞 Bug report

Command (mark with an `x`)

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

Is this a regression?

Yes, but I don't know what is the previous version in which this bug was not present.

Description

When I build my Angular project with ng build --prod, all comments remain in the html, spaces aren't removed, etc. Seems like no minification / uglification / comment removal is taking place.

🔬 Minimal Reproduction

Simply: ng build --prod (run on a basic project with an html comment in index.html

🔥 Exception or Error

No exception, just doesn't minify / uglify / remove comments when it should.

🌍 Your Environment


Angular CLI: 9.1.3
Node: 12.16.2
OS: win32 x64

Angular: 9.1.3
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.901.3
@angular-devkit/build-angular     0.901.3
@angular-devkit/build-optimizer   0.901.3
@angular-devkit/build-webpack     0.901.3
@angular-devkit/core              9.1.3
@angular-devkit/schematics        9.1.3
@angular/cdk                      9.2.1
@angular/material                 9.2.1
@ngtools/webpack                  9.1.3
@schematics/angular               9.1.3
@schematics/update                0.901.3
rxjs                              6.5.5
typescript                        3.8.3
webpack                           4.42.0

Anything else relevant?

I'm running this on Windows 10 x64, if that matters.

Somewhat duplicate of https://github.com/angular/angular-cli/issues/9973, however still not solved in Angular 8 or 9 (I had 8 and upgraded to 9 in the hopes that it would be fixed there, but it isn't). Also, the previously suggested workaround of running ng build --target=production --environment=prod doesn't work, it gives an error message:


Unknown option: '--target'
Unknown option: '--environment'

Thanks!!

devkibuild-angular browser low repro steps memorperformance triage #1 bufix

Source

eranzim

👍1

Most helpful comment

Unfortunately not @Spawnrad . I still have to add the issue about this problem.

EDIT: @spawnrad you can track the issue here #18042

rafa-as on 26 Jun 2020

❤2

All 14 comments

Duplicate of https://github.com/angular/angular-cli/issues/11360

alan-agius4 on 26 Apr 2020

@alan-agius4 I don't think this is a duplicate, I gave index.html as an example, but I can also see css comments inside main-es2015...js file, and I didn't search for js or html comments outside index.html, but there might be some of those as well...
I also found css comments in styles...css.
Also, in terms of minification, html code I found in the same file has many whitespaces that can be removed (some between tags, some inside tags between the attributes...)

eranzim on 26 Apr 2020

Can you share the build section of your angular.json?

alan-agius4 on 26 Apr 2020


        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "aot": true,
            "preserveSymlinks": true,
            "rebaseRootRelativeCssUrls": true,
            "outputPath": "dist",
            "index": "src/index.html",
            "main": "src/main.ts",
            "tsConfig": "src/tsconfig.app.json",
            "polyfills": "src/polyfills.ts",
            "assets": [
              "src/assets",
              "src/favicon.ico",
              "src/favicon.png",
              "src/web.config",
              {
                "glob": "**/*",
                "input": "node_modules/leaflet/dist/images",
                "output": "/assets/img/markers"
              }
            ],
            "styles": [
              "node_modules/bootstrap/dist/css/bootstrap.css",
              "node_modules/typeface-exo/index.css",
              "node_modules/roboto-fontface/css/roboto/roboto-fontface.css",
              "node_modules/ionicons/scss/ionicons.scss",
              "node_modules/@fortawesome/fontawesome-free/css/all.css",
              "node_modules/socicon/css/socicon.css",
              "node_modules/nebular-icons/scss/nebular-icons.scss",
              "node_modules/angular-tree-component/dist/angular-tree-component.css",
              "node_modules/pace-js/templates/pace-theme-flash.tmpl.css",
              "node_modules/leaflet/dist/leaflet.css",
              "src/app/@theme/styles/styles.scss"
            ],
            "scripts": [
              "node_modules/pace-js/pace.min.js",
              "node_modules/tinymce/tinymce.min.js",
              "node_modules/tinymce/themes/modern/theme.min.js",
              "node_modules/tinymce/plugins/link/plugin.min.js",
              "node_modules/tinymce/plugins/paste/plugin.min.js",
              "node_modules/tinymce/plugins/table/plugin.min.js",
              "node_modules/echarts/dist/echarts.min.js",
              "node_modules/echarts/dist/extension/bmap.min.js",
              "node_modules/chart.js/dist/Chart.min.js"
            ]
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ]
            }
          }
        },

eranzim on 26 Apr 2020

This seems like a bug but we'll need to look at a reproduction to find and fix the problem. Can you setup a minimal repro please?

You can read here why this is needed. A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

This might be related to your directory structure so its really important to get an accurate repro to diagnose this.

alan-agius4 on 26 Apr 2020

Ok, so here's what I found so far:

css comments - apparently comments starting with /*! don't get removed, I'm guessing this is a feature, not a bug (didn't know that).

whitespaces in html code - I couldn't (within the reasonable time I can afford for this) give simple reproduction steps, however I can say that I use @nebular/auth npm package, in it (in auth.component.js) there is the following code:



NbAuthComponent = __decorate([

Component({

    selector: 'nb-auth',

    template: 
<nb-layout>
  <nb-layout-column>
    <nb-card>
      <nb-card-header>
        <nav class="navigation">
          <a href="#" (click)="back()" class="link back-link" aria-label="Back">
            <nb-icon icon="arrow-back"></nb-icon>
          </a>
        </nav>
      </nb-card-header>
      <nb-card-body>
        <nb-auth-block>
          <router-outlet></router-outlet>
        </nb-auth-block>
      </nb-card-body>
    </nb-card>
  </nb-layout-column>
</nb-layout>
,

(most likely generated from the code here: https://github.com/akveo/nebular/blob/master/src/framework/auth/components/auth.component.ts)
The template code can be found as-is inside main-es2015...js, i.e.

({selector:"nb-auth",template:'\n    <nb-layout>\n      <nb-layout-column>\n        <nb-card>\n          <nb-card-header>\n...

whitespaces in css code - even inside a new project, after running ng build --prod, you can find inside main-es2015...js code such as: styles:['[_nghost-%COMP%] {\n font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";\n font-size: 14px;\n color: #333;\n.... Seems like at least some of those whitespaces can be removed...

eranzim on 26 Apr 2020

css comments - apparently comments starting with /*! don't get removed, I'm guessing this is a feature, not a bug (didn't know that).

Indeed comments starting with /* ! have a special meaning for CSS tools and in the majority of cases these comments will not be dropped.

whitespaces in html code - I couldn't (within the reasonable time I can afford for this) give simple reproduction steps, however I can say that I use @nebular/auth npm package, in it (in auth.component.js) there is the following code:
NbAuthComponent = __decorate([

Component({

    selector: 'nb-auth',

    template: 
<nb-layout>
  <nb-layout-column>
    <nb-card>
      <nb-card-header>
        <nav class="navigation">
          <a href="#" (click)="back()" class="link back-link" aria-label="Back">
            <nb-icon icon="arrow-back"></nb-icon>
          </a>
        </nav>
      </nb-card-header>
      <nb-card-body>
        <nb-auth-block>
          <router-outlet></router-outlet>
        </nb-auth-block>
      </nb-card-body>
    </nb-card>
  </nb-layout-column>
</nb-layout>
,
(most likely generated from the code here: https://github.com/akveo/nebular/blob/master/src/framework/auth/components/auth.component.ts)
The template code can be found as-is inside main-es2015...js, i.e. ({selector:"nb-auth",template:'\n <nb-layout>\n <nb-layout-column>\n <nb-card>\n <nb-card-header>\n...

I tried to reproduce this locally and wasn't able to. This is also quite surprising because in the output, you shouldn't be seeing any HTML code, because HTML is transformed into JS (instruction sets) when building in AOT mode. For this issue we'd need a reproduction to look into it any further.

whitespaces in css code - even inside a new project, after running ng build --prod, you can find inside main-es2015...js code such as: styles:['[_nghost-%COMP%] {\n font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";\n font-size: 14px;\n color: #333;\n.... Seems like at least some of those whitespaces can be removed...

CSS optimisation only happen on external styles, when styles are inlined either in the html template using the style tag or within the component class using the styles property. The css optimization pipeline is bypassed totally. Maybe the compiler can always remove the new lines, that said for a better optimisation when using styles? //cc for their input @petebacondarwin and @alxhub.

alan-agius4 on 27 Apr 2020

Hi there, some strange thing is happening with prod compilation/minification.

With Angular 9, PageSpeed Insights advise us that main-es2015 file is not minified

Screenshot 2020-05-08 at 11 24 22

We have not made any changes to the build parameters for production when we have made the migration to Angular 9 and never we have seen this "error" with production builds and we have our website developed with Angular since Angular 2.

Our build section:

{
  "build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
      "outputPath": "dist/apps/client/browser",
      "index": "apps/client/src/index-dev.html",
      "main": "apps/client/src/main.ts",
      "polyfills": "apps/client/src/polyfills.ts",
      "tsConfig": "apps/client/tsconfig.app.json",
      "aot": true,
      "assets": [
        "apps/client/src/assets",
        {
          "glob": "**/*",
          "input": "../../node_modules/@cnv/ui/components/form/input-phone/src/assets/flags",
          "output": "assets/flags"
        },
        {
          "glob": "**/*",
          "input": "../../node_modules/@cnv/ui/components/form/dropdown/src/assets/icons",
          "output": "assets/icons"
        }
      ],
      "styles": [
        "../../node_modules/normalize.css/normalize.css",
        "apps/client/src/styles.scss"
      ],
      "scripts": [],
      "stylePreprocessorOptions": {
        "includePaths": [
          "apps/client/src/styles"
        ]
      }
    },
    "configurations": {
      "production": {
        "fileReplacements": [
          {
            "replace": "apps/client/src/environments/environment.ts",
            "with": "apps/client/src/environments/environment.prod.ts"
          },
          {
            "replace": "apps/client/src/build-specifics/index.ts",
            "with": "apps/client/src/build-specifics/index.prod.ts"
          }
        ],
        "index": "apps/client/src/index.html",
        "optimization": true,
        "outputHashing": "all",
        "sourceMap": false,
        "extractCss": true,
        "namedChunks": false,
        "extractLicenses": true,
        "vendorChunk": false,
        "buildOptimizer": true,
        "budgets": [
          {
            "type": "initial",
            "maximumWarning": "2mb",
            "maximumError": "5mb"
          },
          {
            "type": "anyComponentStyle",
            "maximumWarning": "6kb",
            "maximumError": "10kb"
          }
        ],
        "tsConfig": "apps/client/tsconfig.app.prod.json"
      },
      "hmr": {
        "budgets": [
          {
            "type": "anyComponentStyle",
            "maximumWarning": "6kb"
          }
        ],
        "fileReplacements": [
          {
            "replace": "apps/client/src/environments/environment.ts",
            "with": "apps/client/src/environments/environment.hmr.ts"
          }
        ],
        "vendorSourceMap": true
      },
      "es5": {
        "budgets": [
          {
            "type": "anyComponentStyle",
            "maximumWarning": "6kb"
          }
        ],
        "tsConfig": "apps/client/tsconfig-es5.app.json"
      },
      "es5-production": {
        "budgets": [
          {
            "type": "anyComponentStyle",
            "maximumWarning": "6kb"
          }
        ],
        "tsConfig": "apps/client/tsconfig-es5.app.prod.json"
      }
    }
  }
}

Our tsconfigs used for production:

workspace tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

base tsconfig.json

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "baseUrl": "./"
  },
  "include": [
    "src/**/*.ts"
  ]
}

tsconfig.app.json

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "../../dist/out-tsc/apps/client",
    "types": [
      "node"
    ],
    "paths": {
      "@app/*": [
        "src/app/*"
      ],
      "@common/*": [
        "src/app/common/*"
      ],
      "@core/*": [
        "src/app/core/*"
      ],
      "@env/*": [
        "src/environments/*"
      ],
      "@build-specifics": [
        "src/build-specifics"
      ],
      "@cnv/*": [
        "../../libs/*/src/index.ts"
      ]
    }
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}

tsconfig.app.prod.json

{
  "extends": "./tsconfig.app.json",
  "compilerOptions": {
    "paths": {
      "@app/*": [
        "src/app/*"
      ],
      "@common/*": [
        "src/app/common/*"
      ],
      "@core/*": [
        "src/app/core/*"
      ],
      "@env/*": [
        "src/environments/*"
      ],
      "@build-specifics": [
        "src/build-specifics"
      ]
    }
  }
}

We have tried to minify the main file(previously minified by angular-cli) manually with other tools but it seems that it's completely minified.

You can check it at carnovo.com or SpeedInisghts

rafa-as on 8 May 2020

@eranzim, can you provide a minimal repro of what you are seeing? It's hard for us to debug further without one. /*! comments are not stripped and CSS using the styles decorator option is not minified, so those are both working as expected. If you can get a minimal reproduction of the template HTML persisting in a prod build, we can look into that further.

@rafa-as, can you open a new issue for what you're seeing? It will be easier to debug/track that in a separate issue.