Develop Reference

After ng build --prod, why am I getting errors in main.js:1 and polyfills.js:1, rather than in components that I created, How to undo this?

I wanted to deploy an almost finished Angular project and for deployment I executed ng build --prod. It created a dist which than I deployed to the server. All understood and Ok till here but now when I change stuff in the project and execute 'ng serve -o' I don't see console messages that I set in those components where I wrote those console.log messages but rather these are being referred from 'main.js:1' and 'polyfills.js:1'.
I am still getting those console messages but I don't know in which component it is being printed on the console.
ERROR TypeError: Cannot read property 'UserzAccessStatus' of undefined
at main.js:1
at i.<computed> (polyfills.js:1)
at e.invokeTask (polyfills.js:1)
at Object.onInvokeTask (main.js:1)
at e.invokeTask (polyfills.js:1)
at t.runTask (polyfills.js:1)
at t.invokeTask (polyfills.js:1)
at invoke (polyfills.js:1)
at r.args.<computed> (polyfills.js:1)
Console.log() messages in chrome's console
package.json file
{
"name": "gbcl",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"start:server": "nodemon server.js"
},
"private": true,
"dependencies": {
"#angular/animations": "~12.0.0",
"#angular/common": "~12.0.0",
"#angular/compiler": "~12.0.0",
"#angular/core": "~12.0.0",
"#angular/forms": "~12.0.0",
"#angular/platform-browser": "~12.0.0",
"#angular/platform-browser-dynamic": "~12.0.0",
"#angular/router": "~12.0.0",
"bcrypt": "^5.0.1",
"body-parser": "^1.19.0",
"bootstrap": "^4.5.2",
"express": "^4.17.1",
"jquery": "^3.6.0",
"mongoose": "^5.12.8",
"mongoose-unique-validator": "^2.0.3",
"popper.js": "^1.16.1",
"rxjs": "~6.5.3",
"tslib": "^2.2.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"#angular-devkit/build-angular": "~12.0.0",
"#angular/cli": "^12.0.0",
"#angular/compiler-cli": "^12.0.0",
"#types/jasmine": "~3.7.2",
"#types/jasminewd2": "~2.0.9",
"#types/node": "^15.0.3",
"codelyzer": "^6.0.2",
"jasmine-core": "~3.7.1",
"jasmine-spec-reporter": "~7.0.0",
"karma": "~6.3.2",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.3",
"karma-jasmine": "~4.0.1",
"karma-jasmine-html-reporter": "^1.6.0",
"nodemon": "^2.0.7",
"protractor": "~7.0.0",
"ts-node": "~9.1.1",
"tslint": "~6.1.0",
"typescript": "~4.2.4"
}
}
tsconfig.app.json file
{
"extends": "./tsconfig.base.json",
"compilerOptions": {
"outDir": "./out-tsc/app",
"types": []
},
"angularCompilerOptions":{
"enableIvy": true,
"strictTemplates": true,
"strictInjectionParameters": true
},
"files": [
"src/main.ts",
"src/polyfills.ts"
],
"include": [
"src/**/*.d.ts"
]
}
If further information about any file is required than please ask.

To see the exact location of the error in production environment
ng build --prod --build-optimizer --sourceMap=true
you can get build.
Your error is most likely "???????" There is no "UserzAccessStatus" key in the object you print with its name.

You have to update the serve configuration part in your angular.json according to this reply
Angular 12 'ng serve' builds apps slowly, almost like production builds

Angular 9 Application not loading in IE11

I am facing an issue where my app is not loading in IE 11 after adding ngx-treeview.
I am getting the following error(SCRIPT1002: Syntax error),
Script Error
Error point in vendor.js
I am not sure how to resolve this issue. The application runs fine in chrome and firefox but in IE11 I only see Loading... . I couldn't find browser compatibility on the library github page. Should I give up on using this library or there is a way to fix this issue.
The package.json file is
"scripts": {
"ng": "ng",
"start": "ng serve --extract-css",
"build": "ng build --extract-css",
"build:ssr": "npm run build -- --app=ssr --output-hashing=media",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"postinstall": "ngcc"
},
"private": true,
"dependencies": {
"#angular-slider/ngx-slider": "^2.0.3",
"#angular/animations": "^9.1.13",
"#angular/common": "^9.1.13",
"#angular/compiler": "^9.1.13",
"#angular/core": "^9.1.13",
"#angular/forms": "^9.1.13",
"#angular/platform-browser": "^9.1.13",
"#angular/platform-browser-dynamic": "^9.1.13",
"#angular/platform-server": "^9.1.13",
"#angular/router": "^9.1.13",
"#fortawesome/fontawesome-free": "^5.15.3",
"#ng-select/ng-select": "4.0.4",
"angular-polyfills": "^1.0.1",
"aspnet-prerendering": "^3.0.1",
"bootstrap": "^4.6.0",
"btoa": "^1.2.1",
"classlist.js": "^1.1.20150312",
"console-polyfill": "^0.3.0",
"core-js": "^2.4.1",
"hidden-attribute-polyfill": "^0.1.0",
"ie9-oninput-polyfill": "^1.1.1",
"jquery": "^3.4.1",
"ngx-bootstrap": "^6.2.0",
"ngx-infinite-scroll": "^9.1.0",
"ngx-treeview": "^10.0.2",
"node-sass": "^4.14.1",
"responsive-toolkit": "^2.6.3",
"rxjs": "^6.6.3",
"rxjs-compat": "^6.0.0-rc.0",
"tslib": "^1.10.0",
"web-animations-js": "^2.3.2",
"zone.js": "~0.10.2"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.901.13",
"#angular/cli": "^9.1.13",
"#angular/compiler-cli": "^9.1.13",
"#angular/language-service": "^9.1.13",
"#types/jasmine": "~2.8.3",
"#types/jasminewd2": "~2.0.2",
"#types/node": "^12.11.1",
"codelyzer": "^5.1.2",
"jasmine-core": "~2.8.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~2.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ts-node": "~4.1.0",
"tslint": "~5.9.1",
"typescript": "~3.8.3"
},
"optionalDependencies": {}
}}```
and tsconfig.json is
```{
"compileOnSave": false,
"compilerOptions": {
"downlevelIteration": true,
"importHelpers": true,
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"typeRoots": [
"node_modules/#types"
],
"lib": [
"es2017",
"dom"
],
"module": "esnext",
"baseUrl": "./"
}
}

In browserslist file, modify not IE 9-11 to IE 9-11
In tsconfig.json file, modify "target": "es2015"to "target": "es5"

Vendor Bundle Size Not Reducing

I'm trying to get my build much smaller to get my load time faster, but when I run
ng build --prod --aot --vendor-chunk --common-chunk --build-optimizer and then run a lighthouse report from google dev tools
I get
what's odd is that it seems to have worked if I go into the dist folder to look at file sizes, which seem smaller that the lighthouse report.
So far to reduce the size by doing the following:
Removed old/unused package.json entries
changed all material imports to specific path like for paginator I'm importing now as
import { MatPaginator } from "#angular/material/paginator";
instead of import { MatPaginator } from "#angular/material/"; per the advice from other posts.
replaced moment with moment.min.js so that locales don't get added
added brotli for text compression.
Also I want to mention because I don't know if it's relevant, but I don't have a webpack.config.js file only a custom-webpack.config.js for brotli. The only thing I edited in angular.json to get webpack working was this for brotli
"architect": {
"build": {
"builder": "#angular-builders/custom-webpack:browser",
"options": {
"customWebpackConfig": {
"path": "./custom-webpack.config.js"
},
I've never used webpack before so this could be an issue, but I'm not sure.
package.json
{
"name": "mean-course",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "webpack-dev-server --mode development --open",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"start:server": "nodemon backend/server.js"
},
"private": true,
"dependencies": {
"#angular/animations": "^8.2.13",
"#angular/cdk": "~8.2.2",
"#angular/common": "~8.2.4",
"#angular/compiler": "~8.2.4",
"#angular/core": "~8.2.4",
"#angular/forms": "~8.2.4",
"#angular/material": "^8.2.2",
"#angular/platform-browser": "~8.2.4",
"#angular/platform-browser-dynamic": "~8.2.4",
"#angular/router": "~8.2.4",
"#ng-bootstrap/ng-bootstrap": "^5.1.5",
"#ngrx/store": "^8.6.0",
"ably": "^1.1.22",
"angular-doka": "file:src/angular-doka",
"angular-filepond": "^1.0.5",
"azure-arm-rediscache": "^3.0.0",
"bootstrap": "^4.4.1",
"classlist.js": "^1.1.20150312",
"countdown": "^2.6.0",
"dotenv": "^8.2.0",
"filepond": "^4.13.4",
"filepond-plugin-file-encode": "^2.1.5",
"filepond-plugin-file-validate-size": "^2.2.0",
"filepond-plugin-file-validate-type": "^1.2.5",
"filepond-plugin-image-crop": "^2.0.3",
"filepond-plugin-image-edit": "^1.6.0",
"filepond-plugin-image-exif-orientation": "^1.0.7",
"filepond-plugin-image-preview": "^4.6.1",
"filepond-plugin-image-resize": "^2.0.4",
"filepond-plugin-image-transform": "^3.7.2",
"jquery": "^3.5.1",
"jsonwebtoken": "^8.5.1",
"lib-storage-service": "^1.0.2",
"material": "^0.4.1",
"moment-mini": "^2.24.0",
"ng-starrating": "^1.0.20",
"ngx-bar-rating": "^1.1.0",
"ngx-clipboard": "^12.3.0",
"ngx-device-detector": "^1.3.20",
"ngx-filepond": "^5.0.1",
"ngx-light-carousel": "^1.0.37-beta.8",
"ngx-pagination": "^5.0.0",
"ngx-simple-countdown": "^1.0.2",
"ngx-spinner": "^8.0.3",
"ngx-toastr": "^11.2.1",
"ngx-ui-carousel": "^1.3.2",
"numeral": "^2.0.6",
"rxjs": "~6.4.0",
"tslib": "^1.10.0",
"tsoa": "^2.5.7",
"uid": "0.0.2",
"web-animations-js": "^2.3.2",
"yamljs": "^0.3.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"#angular-builders/custom-webpack": "8.4.1",
"#angular-devkit/build-angular": "^0.803.26",
"#angular/cli": "~8.3.2",
"#angular/compiler-cli": "~8.2.4",
"#angular/language-service": "~8.2.4",
"#types/jasmine": "~3.3.8",
"#types/jasminewd2": "~2.0.3",
"#types/node": "^8.10.59",
"brotli-gzip-webpack-plugin": "^0.5.0",
"brotli-webpack-plugin": "^1.1.0",
"codelyzer": "^5.0.0",
"compression-webpack-plugin": "^4.0.0",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "^4.4.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "~3.5.3"
},
"browser": {
"crypto": false
}
}
Here is a stats.json file when using ng build --prod
Here's a more detailed version as well

Remove libraries like ngx-spinner, filepond etc. which are huge as they are not treeshakable. Also if you have not configured your server to serve gzip files, do that. It will give you huge reduction in size. Also pre gzip your js files after build my using a utility like gzip-all.
https://www.npmjs.com/package/gzip-all
Also change your server max cache policy to get caching benefits.

ng build works but ng build --prod throws an error

I am a student learning Angular by building project. When i do ng build it works but ng build --prod gives an error.
I have tried removing node_modules and then reinstalling it again.
The error says as follows:
ERROR in ./src/app/app.module.ngfactory.js 41:3371-3377 "export 'ɵa'
(imported as 'i12') was not found in '#angular/common'
Here is my package.json file.
"name": "angular-project",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "~8.2.0",
"#angular/cdk": "^8.1.3",
"#angular/common": "~8.2.0",
"#angular/compiler": "~8.2.0",
"#angular/core": "~8.2.0",
"#angular/forms": "~8.2.0",
"#angular/platform-browser": "~8.2.0",
"#angular/platform-browser-dynamic": "~8.2.0",
"#angular/router": "~8.2.0",
"#ng-bootstrap/ng-bootstrap": "^5.1.0",
"#types/socket.io-client": "^1.4.32",
"avatar-name-initials": "^2.0.5",
"bootstrap": "^4.3.1",
"express": "^4.17.1",
"ng2-file-upload": "^1.3.0",
"path": "^0.12.7",
"rxjs": "~6.4.0",
"rxjs-compat": "^6.5.4",
"socket.io-client": "^2.3.0",
"sweetalert2": "^8.16.1",
"time-ago-pipe": "^1.3.2",
"tslib": "^1.10.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.802.1",
"#angular/cli": "^8.3.0",
"#angular/compiler-cli": "^8.2.3",
"#angular/language-service": "~8.2.0",
"#types/jasmine": "~3.3.8",
"#types/jasminewd2": "~2.0.3",
"#types/node": "~8.9.4",
"codelyzer": "^5.0.0",
"enhanced-resolve": "^3.3.0",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "~3.5.3"
}
}
Production Configuration
"configurations": {
"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"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10kb"
}
]
}
}
Note: If i turn aot and buildOptimizer to false, it works and no error is thrown.

Error while build angular 6 app using webpack

I'm trying to build the angular 6 app using webpack.
getting error as
ERROR in ./src/main.ts
Module build failed (from ./node_modules/#ngtools/webpack/src/index.js):
Error: Cannot find module '#angular/compiler-cli/ngcc'
package.json
{
"name": "cloud-complince",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "webpack",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "^6.1.10",
"#angular/common": "^6.1.10",
"#angular/compiler": "^6.1.10",
"#angular/core": "^6.1.10",
"#angular/forms": "^6.1.10",
"#angular/http": "^6.1.10",
"#angular/platform-browser": "^6.1.10",
"#angular/platform-browser-dynamic": "^6.1.10",
"#angular/router": "^6.1.10",
"chart.js": "^2.8.0",
"chartjs-plugin-datalabels": "^0.4.0",
"classlist.js": "^1.1.20150312",
"core-js": "^2.6.9",
"ngx-cookie": "^3.0.1",
"rxjs": "~6.2.0",
"rxjs-compat": "^6.5.2",
"web-animations-js": "^2.3.2",
"zone.js": "^0.8.29"
},
"devDependencies": {
"#angular-devkit/build-angular": "^0.8.9",
"#angular/cli": "^6.2.7",
"#angular/compiler-cli": "^6.1.0",
"#angular/language-service": "^6.1.10",
"#ngtools/webpack": "^8.1.1",
"#types/jasmine": "^2.8.16",
"#types/jasminewd2": "^2.0.6",
"#types/node": "~8.9.4",
"codelyzer": "~4.3.0",
"copy-webpack-plugin": "^4.6.0",
"html-webpack-plugin": "^2.30.1",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~3.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "^2.0.5",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "^5.4.2",
"raw-loader": "^0.5.1",
"script-ext-html-webpack-plugin": "^1.8.8",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~2.9.2",
"webpack": "4.24.0"
}
}
tsconfig.json
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"module": "es2015",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"skipLibCheck": true,
"typeRoots": [
"node_modules/#types"
],
"lib": [
"es2017",
"dom"
]
}
}
Kindly help me to resolve this issue
Thanks in advance

Try these command to see if it work
npm uninstall angular-cli -g
npm uninstall angular-cli --save
npm install -g #angular/cli
npm install #angular/cli --save
npm install #angular/compiler-cli --save