How to use `keep_classnames` properly?

1.1k Views Asked by At

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

There are 0 best solutions below