Angular 7 is not minifying html, js, css files

Question

I have a problem with my project in Angular 7.

The problem is after compilation I have no minified and uglified files in Chrome console. After running project in production environment I received this information in console:

Time: 31790ms
chunk {main} main.js (main) 11.3 MB [initial] [rendered]
chunk {polyfills} polyfills.js (polyfills) 539 kB [initial] [rendered]
chunk {runtime} runtime.js (runtime) 6.04 kB [entry] [rendered]
chunk {scripts} scripts.js (scripts) 52.1 kB [entry] [rendered]
chunk {styles} styles.js (styles) 654 kB [initial] [rendered]

As you can see chunk {main} has above 11.3 MB.

Once entered the Chrome console I can see those files in my Sources:

Unfortunately, only scripts.4d10c1b333ada0ab6568.js is fully minified. Rest of files are untouched and still not minified and uglified.

I have tried to find a solution, and I found that this should be placed in my angular.json file:

This not helps either. Here is my package.json file:

Can anyone help to set my project up to create uglified and minified files? Thank you!

Updated dependencies from package.json:

"dependencies": {
    "@angular/animations": "^7.2.1",
    "@angular/cdk": "^7.1.1",
    "@angular/common": "~7.1.0",
    "@angular/compiler": "~7.1.0",
    "@angular/core": "~7.1.0",
    "@angular/forms": "~7.1.0",
    "@angular/material": "^7.1.1",
    "@angular/platform-browser": "~7.1.0",
    "@angular/platform-browser-dynamic": "~7.1.0",
    "@angular/router": "~7.1.0",
    "@ngx-translate/core": "^11.0.1",
    "@ngx-translate/http-loader": "^4.0.0",
    "@nicky-lenaers/ngx-scroll-to": "^2.0.0",
    "@types/moment": "^2.13.0",
    "bindings": "^1.3.1",
    "classlist.js": "^1.1.20150312",
    "core-js": "^2.5.4",
    "dotenv": "^6.2.0",
    "fuzzy": "^0.1.3",
    "hammerjs": "^2.0.8",
    "highlight.js": "^9.13.1",
    "jquery": "^3.3.1",
    "lscache": "^1.3.0",
    "moment": "^2.24.0",
    "ngx-dropdown-list": "^1.1.1",
    "ngx-slick": "^0.2.1",
    "ngx-slick-carousel": "^0.4.4",
    "ngx-smart-modal": "^7.1.1",
    "ngx-stripe": "^6.0.0-rc.0",
    "ngx-toastr": "^9.1.1",
    "node": "^11.6.0",
    "node-sass": "^4.11.0",
    "reflect-metadata": "^0.1.12",
    "rollbar": "^2.5.1",
    "rxjs": "^6.3.3",
    "rxjs-compat": "^6.3.3",
    "slick-carousel": "^1.8.1",
    "tiny-slider": "^2.9.1",
    "ts-loader": "^5.3.1",
    "tslib": "^1.9.0",
    "web-animations-js": "^2.3.1",
    "zone.js": "^0.8.28"
  }

Whole angular.json file:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "project-portal": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {
        "@schematics/angular:component": {
          "styleext": "scss"
        }
      },
      "architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "./extra-webpack.config.js"
            },
            "outputPath": "dist/project-portal",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/app/styles/style.scss",
              "node_modules/ngx-toastr/toastr.css"
            ],
            "scripts": [
              "./node_modules/moment/min/moment.min.js"
            ]
          },
          "configurations": {
            "qa": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.qa.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                }
              ]
            },
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-builders/dev-server:generic",
          "options": {
            "browserTarget": "project-portal:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "project-portal:build:production"
            },
            "qa": {
              "browserTarget": "project-portal:build:qa"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "project-portal:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
              "src/styles.scss",
              "node_modules/ngx-toastr/toastr.css"
            ],
            "scripts": [
              "./node_modules/moment/min/moment.min.js"
            ],
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "project-portal-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "prefix": "",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "project-portal:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "project-portal:serve:production"
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "project-portal"
}

How do you build your app? And how did you create your app? Did you use angular/cli or something else? — Drag13
– Drag13, Commented Mar 14, 2019 at 13:46
I'm building it and running with command: npm run start:prod. App was created with angular/cli. — whiteBear22
– whiteBear22, Commented Mar 14, 2019 at 13:49
ng build --configuration=production should cause your build to use the configuration parameters you showed from your angular.json file above. Also, make sure you updated the correct config section in your angular.json file. If you have created more than one application in your workspace there is an entry for each application. — BruceK
– BruceK, Commented Mar 14, 2019 at 13:59
Could you try to do next: Update package.json with ng command: { "ng": "ng" "build": "ng build" } and run command npm run build -- --prod and check again — Drag13
– Drag13, Commented Mar 14, 2019 at 14:01
@Drag13 I have added { "ng": "ng" "build": "ng build" } but this is what I receive after build: Time: 45504ms chunk {main} main.a8377ca7b7d82e8383aa.js (main) 10.5 MB [initial] [rendered] chunk {polyfills} polyfills.20073962a51430aa9622.js (polyfills) 539 kB [initial] [rendered] chunk {runtime} runtime.618bcded6741c4c27fdf.js (runtime) 6.04 kB [entry] [rendered] chunk {scripts} scripts.4d10c1b333ada0ab6568.js (scripts) 52.1 kB [entry] [rendered] chunk {styles} styles.21ba0f4957e4e98a179c.css (styles) 619 kB Looks like still no minification for them, especially for main — whiteBear22
– whiteBear22, Commented Mar 14, 2019 at 14:11

whiteBear22 · Accepted Answer · 2019-03-15 07:21:33Z

1

Ok, looks like I figure this out. "Builder" option in angular.json file has been changed. It's because custom webpack which was used in the project. Simply changed:

"builder": "@angular-builders/custom-webpack:browser"

to:

"builder": "@angular-devkit/build-angular:browser"

that solved the problem with minification all files on production environment.

answered Mar 15, 2019 at 7:21

whiteBear22

4072 gold badges9 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

atconway · Accepted Answer · 2019-11-11 19:53:36Z

If you want to run the Angular CLI from your npm start and subsequently build scripts without using the alias ng directly as you have setup, you might want to make sure and get the path correct in the node_modules folder. It should be the following (and add your additional scripting; I can't copy from your screenshot):

build: "node node_modules/@angular/cli/bin/ng build --prod"

You also shouldn't need that --aot flag as that's covered via "aot": true. As a separate test, you should run ng build --prod independently and inspect the bundles at the output path specified: "outputPath": "dist/project-portal" I suspect the npm command you are using for npm run build isn't composed correctly and picking up the proper commands/configuration. The reason for the bundles not being minified is flat out because the buildOptimizer, optimization, or aot flags not being read correctly from angular.json

Collectives™ on Stack Overflow

Angular 7 is not minifying html, js, css files

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related