I am using Angular 6 to implement a frontend for an ASP NET web application.
Regarding performance issues I wanted to reduce the size of the vendor.js file.
Therefore I found a solution to build my Angular project with following command:
ng build --prod --base-href "myURL"
Now I get the following error:
ERROR in scripts.XX.js from Terser
"f" is redeclared [scripts.XX.js:2483, 589]
'XX' is a hash like 737de149a78
. I´ve read several questions and answers, changing the version of Terser to 3.14.1 did not help.
My first approach to fix this issue was trying to find a variable or module named "f" in the whole project, to see if it was redeclared at any point, but a variable named "f" does not exist.
So my question is: How can I find the variable that seems to be redeclared without going through thousands of files and lines of code? Or is there another way to fix this error?
package.json:
{
"name": "myProj",
"version": "1.1.0",
"scripts": {
"ng": "ng",
"json-server": "json-server --watch db.json",
"start": "ng serve --proxy-config proxy.config.json",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular-devkit/core": "^0.6.5",
"@angular-devkit/schematics": "^0.6.5",
"@angular/animations": "^6.1.6",
"@angular/cdk": "^6.4.7",
"@angular/common": "^6.1.6",
"@angular/compiler": "^6.1.6",
"@angular/core": "^6.1.6",
"@angular/forms": "^6.1.6",
"@angular/http": "^6.1.6",
"@angular/material": "^6.4.7",
"@angular/material-moment-adapter": "^8.0.1",
"@angular/platform-browser": "^6.1.6",
"@angular/platform-browser-dynamic": "^6.1.6",
"@angular/router": "^6.1.6",
"@ng-bootstrap/ng-bootstrap": "^3.2.0",
"angular-highcharts": "^8.0.2",
"angular-in-memory-web-api": "^0.6.1",
"angular-popper": "^2.0.0",
"bootstrap": "^4.1.3",
"core-js": "^2.5.4",
"cors": "^2.8.5",
"highcharts": "^7.1.2",
"jquery": "^3.3.1",
"json-server": "^0.14.0",
"moment": "^2.24.0",
"ngx-cookie": "^4.1.2",
"ngx-cookie-service": "^2.3.0",
"popper.js": "^1.14.4",
"rxjs": "^6.3.1",
"tooltip.js": "^1.3.0",
"tslib": "^1.9.0",
"zone.js": "~0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.13.9",
"@angular/cli": "~7.3.9",
"@angular/compiler-cli": "^6.1.6",
"@angular/language-service": "^6.1.6",
"@types/jasmine": "~2.8.6",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"codelyzer": "~4.2.1",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~1.7.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.0",
"karma-jasmine": "~1.1.1",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~5.0.1",
"tslint": "~5.9.1",
"typescript": "~2.9.2"
}
}
I´m glad for any kind of help.
EDIT:
I have a temporary solution, that may helps others who have to face this problem, too:
ng build --prod --optimization=false --base-href "myURL"
.
Why this is not a proper solution in my case:
After I have built my Angular project with --prod
flag, the project wasn't built correctly, but the scripts.XX.js file was created anyway. In this file were multiple variables named f. As a next step I took a look what the --prod
flag does (see: https://angular.io/cli/build).
Under further Details (see: https://angular.io/guide/workspace-config) I read that enabling the --prod
flag leads to rewriting code to use short, cryptic names ("minification").
There was also declared, that the application builder uses the webpack build tool (see: https://webpack.js.org/plugins/terser-webpack-plugin/).
So my approach to fix the issue was to disable the minify function of the terser plugin. And this can be done by changing the "optimization"
in your angular.json file to false
(see: AngularCli: disable minification):
"configurations": {
"production": {
"optimization": false, // <--- change optimization to false
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
}
}
Of course you can use the --optimization=false
flag instead.
BUT: Disabling the minify function leads to a bigger size of the main.js file, what I was trying to avoid. So for me there is no point in using --prod flag without optimizaion.