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

[eranzim]

🐞 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 #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!!

[alan-agius4]

Duplicate of #11360

[eranzim]

@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...)

[alan-agius4]

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

[eranzim]

        "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"
                }
              ]
            }
          }
        },

[alan-agius4]

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.

[eranzim]

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

1. css comments - apparently comments starting with /*! don't get removed, I'm guessing this is a feature, not a bug (didn't know that).
2. 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...
3. 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...

[alan-agius4]

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

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

3. 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: CLI default output is too verbose #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.

[rafa-suagu]

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

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