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

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

Answer 2

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