Angular 7 is not minifying html, js, css files
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
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.