I updated Angular in old app (from 7 to 11), everything went fine except for one thing :). At the outset, let me say that I'm not an expert in Angular.
After executing command ng build --prod
, I got:
Schema validation failed with the following errors:
Data path "" should NOT have additional properties(terserOptions).
I changed in Angular.json
"production": {
"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"
}
],
"terserOptions": {
"keep_classnames": ".*Component",
"keep_fnames": ".*Component"
}
to
"production": {
"customWebpackConfig": {
"path": "./webpack.config.js"
},
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
And I added webpack.config.js
:
const TerserPlugin = require("terser-webpack-plugin");
module.exports = {
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
terserOptions: {
keep_classnames: ".*Component",
keep_fnames: ".*Component",
},
}),
],
},
};
OK, prod is building, but the app still isn't working properly. I can't open more than one window at a time... Terser is used to avoid shorten names of componets, when minimizing code when building prod, because these names are used to handle windows. What am I doing wrong? Or should I use another way to keep these component names?
I'm also attaching package.json
:
{
"name": "app",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build --prod",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^11.1.2",
"@angular/cdk": "^11.1.1",
"@angular/common": "^11.1.2",
"@angular/compiler": "^11.1.2",
"@angular/core": "^11.1.2",
"@angular/flex-layout": "^11.0.0-beta.33",
"@angular/forms": "^11.1.2",
"@angular/material": "^11.1.1",
"@angular/platform-browser": "^11.1.2",
"@angular/platform-browser-dynamic": "^11.1.2",
"@angular/platform-server": "^11.1.2",
"@angular/router": "^11.1.2",
"@asymmetrik/ngx-leaflet": "^8.1.0",
"@ngtools/webpack": "^11.1.2",
"@types/node": "^14.14.25",
"angular-resizable-element": "^3.3.5",
"angular2-draggable": "1.4.2",
"circular-json": "^0.5.4",
"core-js": "^3.8.3",
"hammerjs": "^2.0.8",
"jquery": "^3.5.1",
"keycloak-angular": "^8.1.0",
"keycloak-js": "^12.0.2",
"leaflet": "^1.7.1",
"lodash": "^4.17.20",
"ng2-dragula": "^1.5.0",
"rxjs": "^6.6.3",
"ts-md5": "^1.2.7",
"typings": "^2.1.1",
"zone.js": "^0.11.3"
},
"devDependencies": {
"@angular-builders/custom-webpack": "^11.0.0",
"@angular-devkit/architect": "^0.1101.1",
"@angular-devkit/build-angular": "^0.1101.1",
"@angular-eslint/builder": "^1.1.0",
"@angular-eslint/eslint-plugin": "1.1.0",
"@angular-eslint/eslint-plugin-template": "1.1.0",
"@angular-eslint/schematics": "1.1.0",
"@angular-eslint/template-parser": "1.1.0",
"@angular/cli": "^11.1.2",
"@angular/compiler-cli": "^11.1.2",
"@angular/language-service": "^11.1.2",
"@types/jasmine": "^3.6.3",
"@types/jasminewd2": "~2.0.8",
"@types/leaflet": "^1.5.21",
"@typescript-eslint/eslint-plugin": "4.14.2",
"@typescript-eslint/parser": "4.14.2",
"eslint": "^7.19.0",
"eslint-plugin-import": "2.22.1",
"eslint-plugin-jsdoc": "31.6.0",
"eslint-plugin-prefer-arrow": "1.2.3",
"jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~6.0.0",
"karma": "^6.1.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "^3.0.3",
"karma-jasmine": "^4.0.1",
"karma-jasmine-html-reporter": "^1.5.4",
"protractor": "^7.0.0",
"terser-webpack-plugin": "^4.2.3",
"ts-node": "~9.1.1",
"typescript": "^4.1.3",
"webpack": "^4.0.0"
}
}