We Keep Coding

Angular 14 ng build --configuration production after upgrading

Recently I update my project from ng 13 to ng 14.
What I execute ng build --configuration production, CLI creates some compiled and minimized js files.
One of the minimized files was scripts.js.
When I deploy it in IIS it is crushed and not displayed on the browser.
One of the errors in the console was :
Unexpected token
The project was not compiled well and I saw that when I execute ng build without --production, the js if different and OK.
Does anyone face this issue?
package.json
{
"name": "knesset-website-app",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "^14.0.6",
"#angular/cdk": "^14.1.0",
"#angular/cli": "^14.0.6",
"#angular/common": "^14.0.6",
"#angular/compiler": "^14.0.6",
"#angular/core": "^14.0.6",
"#angular/forms": "^14.0.6",
"#angular/localize": "^14.0.6",
"#angular/platform-browser": "^14.0.6",
"#angular/platform-browser-dynamic": "^14.0.6",
"#angular/router": "^14.0.6",
"#ngx-translate/core": "^14.0.0",
"#ngx-translate/http-loader": "^7.0.0",
"#progress/kendo-angular-buttons": "^8.0.0",
"#progress/kendo-angular-common": "^3.1.0",
"#progress/kendo-angular-dateinputs": "^7.0.1",
"#progress/kendo-angular-dialog": "^7.1.2",
"#progress/kendo-angular-dropdowns": "^7.0.2",
"#progress/kendo-angular-excel-export": "^5.0.1",
"#progress/kendo-angular-grid": "^7.2.2",
"#progress/kendo-angular-icons": "^2.0.1",
"#progress/kendo-angular-inputs": "^9.0.3",
"#progress/kendo-angular-intl": "^4.1.0",
"#progress/kendo-angular-l10n": "^4.0.0",
"#progress/kendo-angular-label": "^4.0.0",
"#progress/kendo-angular-layout": "^7.1.0",
"#progress/kendo-angular-pager": "^4.0.1",
"#progress/kendo-angular-pdf-export": "^4.0.0",
"#progress/kendo-angular-popup": "^5.0.0",
"#progress/kendo-angular-progressbar": "^3.0.0",
"#progress/kendo-angular-tooltip": "^4.0.1",
"#progress/kendo-angular-treeview": "^7.1.0",
"#progress/kendo-data-query": "^1.6.0",
"#progress/kendo-drawing": "^1.16.3",
"#progress/kendo-licensing": "^1.2.2",
"#progress/kendo-svg-icons": "^0.2.0",
"#progress/kendo-theme-default": "latest",
"#types/jquery": "^3.5.5",
"#videogular/ngx-videogular": "^5.0.1",
"bootstrap": "^4.6.0",
"bootstrap-v4-rtl": "^4.6.0-2",
"core-js": "^2.5.4",
"dashjs": "^4.3.0",
"font-awesome": "^4.7.0",
"hls.js": "^1.1.5",
"jquery": "^3.6.0",
"ng-recaptcha": "^10.0.0",
"ngx-device-detector": "^2.1.1",
"popper.js": "^1.12.3",
"primeicons": "^4.1.0",
"primeng": "^10.0.3",
"rxjs": "~6.6.6",
"scriptjs": "^2.5.9",
"tslib": "^2.4.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"#angular-devkit/build-angular": "^14.0.6",
"#angular/compiler-cli": "^14.0.6",
"#angular/language-service": "^14.0.6",
"#types/core-js": "^2.5.5",
"#types/jasmine": "~3.6.0",
"#types/jasminewd2": "~2.0.3",
"#types/node": "^12.11.1",
"codelyzer": "^0.0.28",
"jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "^6.3.17",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "~7.0.0",
"tslint": "~6.1.0",
"typescript": "~4.6.3"
}
}

Angular 8.2.14 with PrimeNG 8.0.0, Application not getting loaded in IE11

I have recently upgraded from angular 7 to angular 8.2.14, along with the PrimeNG version upgraded to 8.0.0, and the Application working in all the browsers except the internet explorer
Below is my package.json file
"dependencies": {
"#angular-devkit/build-angular": "~0.803.29",
"#angular/animations": "8.2.14",
"#angular/cdk": "^11.2.11",
"#angular/cli": "8.3.29",
"#angular/common": "8.2.14",
"#angular/compiler": "8.2.14",
"#angular/compiler-cli": "8.2.14",
"#angular/core": "8.2.14",
"#angular/forms": "8.2.14",
"#angular/platform-browser": "8.2.14",
"#angular/platform-browser-dynamic": "8.2.14",
"#angular/platform-server": "8.2.14",
"#angular/router": "8.2.14",
"#ng-idle/core": "^7.0.0-beta.1",
"#ng-idle/keepalive": "^7.0.0-beta.1",
"#ngrx/core": "^1.2.0",
"#ngrx/store": "7.1.0",
"#ngrx/store-devtools": "7.1.0",
"chart.js": "^3.2.0",
"core-js": "^2.5.4",
"font-awesome": "^4.7.0",
"moment-timezone": "^0.5.21",
"ng-mocks": "^8.1.0",
"ng2-bootstrap-modal": "^1.0.1",
"ng2-dragula": "1.5.0",
"ng2-select": "~1.2.0",
"ngx-accordion": "0.0.17",
"ngx-autosize": "^1.2.4",
"ngx-bootstrap": "3.2.0",
"ngx-quill": "^13.2.0",
"node-sass": "^4.14.1",
"primeicons": "^3.0.0",
"primeng": "^8.0.0",
"quill": "^1.3.7",
"rimraf": "^3.0.2",
"rxjs": "6.6.3",
"tslib": "^1.10.0",
"typescript": "3.5.3",
"zone.js": "~0.9.1"
},
"devDependencies": {
"#angular/language-service": "^8.2.14",
"#types/jasmine": "~2.8.8",
"#types/jasminewd2": "~2.0.3",
"#types/node": "~8.9.4",
"codelyzer": "^5.0.1",
"html-webpack-plugin": "^5.3.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.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"primeng": "^8.0.0",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"webpack": "^4.35.3",
"webpack-cli": "^3.3.6",
"webpack-dev-server": "^3.7.2"
}
And here is my tsconfig.json file
"compilerOptions": {
"baseUrl": "./",
"downlevelIteration": true,
"importHelpers": true,
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"module": "esnext",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"skipLibCheck": true,
"typeRoots": [
"node_modules/#types"
],
"lib": [
"es2017",
"dom"
],
"esModuleInterop": true,
"resolveJsonModule": true,
"allowSyntheticDefaultImports": true
}
Also, removed 'not'in browserlist file.
Getting below-mentioned error in IE11

I got it solved by changing the version of #angular/cdk to "8.2.1". Since Datatable Module of PrimeNg uses this internally.

Angular 7 IE11 not working. Getting SCRIPT1002 Syntax Error vendor.js

I'm running an Angular 7 application and I'm trying to run it in IE11 and its showing me this error:
"SCRIPT1002: Syntax error " "vendor.js"
and the web page shows as a blank page.
In other browsers its working fine.
I have tried with uncomment polyfills and also tried with adding below line in index.html file
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
Below is my package.json file :
{
"name": "eyerne-frontend",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "node --max_old_space_size=5045 node_modules/#angular/cli/bin/ng serve --aot",
"build": "ng build --prod",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#agm/core": "^1.0.0-beta.6",
"#alyle/ui": "^2.7.6",
"#angular/animations": "^7.2.15",
"#angular/cdk": "^7.3.7",
"#angular/common": "~7.2.0",
"#angular/compiler": "~7.2.0",
"#angular/core": "~7.2.0",
"#angular/forms": "~7.2.0",
"#angular/material": "^7.3.7",
"#angular/platform-browser": "~7.2.0",
"#angular/platform-browser-dynamic": "~7.2.0",
"#angular/router": "~7.2.0",
"#ng-bootstrap/ng-bootstrap": "^4.1.3",
"#ngx-translate/core": "^11.0.1",
"#ngx-translate/http-loader": "^4.0.0",
"amazing-time-picker": "^1.8.0",
"angular-datatables": "^8.0.0",
"angular-gridster2": "^8.2.0",
"angular-resizable-element": "^3.2.4",
"angular2-resizing-cropping-image": "^1.0.2",
"angular2-toaster": "^7.0.0",
"bootstrap": "^4.3.1",
"chroma-js": "^2.0.6",
"classlist.js": "^1.1.20150312",
"core-js": "^2.5.7",
"datatables": "^1.10.18",
"datatables.net": "^1.10.19",
"datatables.net-dt": "^1.10.19",
"echarts": "^4.2.1",
"exif-js": "^2.3.0",
"file-saver": "^2.0.2",
"font-awesome": "^4.7.0",
"hammerjs": "^2.0.8",
"html2canvas": "^1.0.0-rc.4",
"jquery": "^3.4.1",
"merge-images": "^1.1.0",
"moment": "^2.24.0",
"ng-http-loader": "^5.1.0",
"ng2-validation": "^4.2.0",
"ng5-slider": "^1.2.4",
"ngx-bootstrap": "^4.3.0",
"ngx-chips": "^2.0.0-beta.0",
"ngx-color-picker": "^8.1.0",
"ngx-cookie-service": "^2.2.0",
"ngx-echarts": "^4.2.1",
"ngx-google-places-autocomplete": "^2.0.4",
"ngx-slick-carousel": "^0.4.4",
"ngx-webcam": "^0.2.6",
"ngx-xml2json": "^1.0.2",
"recordrtc": "^5.5.8",
"rxjs": "^6.3.3",
"slick-carousel": "^1.8.1",
"socket.io-client": "^2.3.0",
"ts-ebml": "^2.0.2",
"tslib": "^1.9.0",
"web-animations-js": "^2.3.2",
"zone.js": "~0.8.26"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.13.0",
"#angular/cli": "~7.3.0",
"#angular/compiler-cli": "~7.2.0",
"#angular/language-service": "~7.2.0",
"#types/datatables.net": "^1.10.17",
"#types/echarts": "^4.1.9",
"#types/jasmine": "~2.8.8",
"#types/jasminewd2": "~2.0.3",
"#types/jquery": "^3.3.30",
"#types/node": "~8.9.4",
"codelyzer": "~4.5.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "^4.3.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "^5.11.0",
"typescript": "~3.2.2"
}
}
What am I doing wrong? Please let me know if you can help me with this.

angular service worker ngsw_serviceworker.es6.js.map not found

I have registered a service worker with angular 4, when build in prod mode over https it console a message
DevTools failed to parse SourceMap: https://www.somewebsite.com/ngsw_worker.es6.js.map
My Package.json file
{
"name": "healthcare",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"pree2e": "webdriver-manager update",
"sw": "sw-precache --root=dist --config=precache-config.js",
"static-serve": "cd dist && live-server --port=4200 --host=localhost --entry-file=/index.html",
"build-prod-ngsw": "ng build -prod && node_modules/.bin/ngsw-config dist ./src/ngsw-config.json && cp node_modules/#angular/service-worker/ngsw-worker.js ./dist/ngsw-worker.js"
},
"private": true,
"dependencies": {
"#angular/animations": "6.0.6",
"#angular/common": "6.0.6",
"#angular/compiler": "6.0.6",
"#angular/core": "6.0.6",
"#angular/forms": "6.0.6",
"#angular/http": "6.0.6",
"#angular/platform-browser": "6.0.6",
"#angular/platform-browser-dynamic": "6.0.6",
"#angular/pwa": "^0.6.8",
"#angular/router": "6.0.6",
"#angular/service-worker": "6.0.6",
"angular-sweetalert-service": "^2.0.2",
"angular2-cookie": "^1.2.6",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"jquery": "^3.3.1",
"ngx-clipboard": "^11.1.1",
"ngx-owl-carousel": "^2.0.7",
"ngx-snackbar": "^1.2.0-rc.2",
"rxjs": "^6.2.1",
"rxjs-compat": "^6.2.1",
"sw-precache-webpack-dev-plugin": "^0.2.0",
"sw-toolbox": "^3.6.0",
"zone.js": "^0.8.26"
},
"devDependencies": {
"#angular/cli": "6.0.8",
"#angular/compiler-cli": "6.0.6",
"#angular/language-service": "6.0.6",
"#types/jasmine": "~2.5.53",
"#types/jasminewd2": "~2.0.2",
"#types/jquery": "^3.3.4",
"#types/node": "~6.0.60",
"codelyzer": "~3.2.0",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"sw-precache": "^5.2.1",
"sw-precache-webpack-plugin": "^0.11.5",
"ts-node": "~3.2.0",
"tslint": "~5.7.0",
"typescript": "2.7.2",
"#angular-devkit/build-angular": "~0.6.8"
}
}

upgrading Angular 4 to Angular 5, installing packages fails

Node version 6.8.1 and Npm version 3.10.8. Angular CLI version: 6.8.1. Trying to upgrade my angular 4 to angular 5. I am not able to upgrade to Angular 5 always get the below UNMET PEER DEPENDENCY while installing the angular packages.
+-- UNMET PEER DEPENDENCY #angular/cdk#2.0.0-beta.12
+-- UNMET PEER DEPENDENCY #angular/common#5.2.9
+-- UNMET PEER DEPENDENCY #angular/compiler#5.2.9
+-- UNMET PEER DEPENDENCY #angular/core#5.2.9
package.json
"dependencies": {
"#angular/animations": "^5.2.9",
"#angular/cdk": "2.0.0-beta.12",
"#angular/common": "^5.2.9",
"#angular/compiler": "^5.2.9",
"#angular/core": "^5.2.9",
"#angular/flex-layout": "2.0.0-beta.9",
"#angular/forms": "^5.2.9",
"#angular/http": "^5.2.9",
"#angular/material": "2.0.0-beta.12",
"#angular/platform-browser": "^5.2.9",
"#angular/platform-browser-dynamic": "^5.2.9",
"#angular/router": "^5.2.9",
"#swimlane/ngx-charts": "^6.0.0",
"classlist.js": "^1.1.20150312",
"core-js": "^2.4.1",
"d3": "^4.8.0",
"hammerjs": "^2.0.8",
"ng2-dragula": "^1.5.0",
"rxjs": "^5.1.0",
"ts-md5": "^1.2.0",
"web-animations-js": "^2.2.5",
"zone.js": "^0.8.4"
},
"devDependencies": {
"#angular/cli": "^1.7.1",
"#angular/compiler-cli": "^5.2.9",
"#angular/language-service": "^5.2.9",
"#types/jasmine": "~2.5.53",
"#types/jasminewd2": "~2.0.2",
"#types/node": "~6.0.60",
"codelyzer": "~3.0.1",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"semver": "^5.3.0",
"ts-node": "~3.0.4",
"tslint": "~5.7.0",
"typescript": "^2.4.2"
}

Update Package.json file for dependencies/devDependencies
"dependencies": {
"#angular/animations": "^5.0.0",
"#angular/common": "^5.0.0",
"#angular/compiler": "^5.0.0",
"#angular/core": "^5.0.0",
"#angular/forms": "^5.0.0",
"#angular/http": "^5.0.0",
"#angular/platform-browser": "^5.0.0",
"#angular/platform-browser-dynamic": "^5.0.0",
"#angular/router": "^5.0.0",
"core-js": "^2.4.1",
"rxjs": "^5.5.2",
"zone.js": "^0.8.14"
},
"devDependencies": {
"#angular/cli": "1.5.0",
"#angular/compiler-cli": "^5.0.0",
"#angular/language-service": "^5.0.0",
"#types/jasmine": "~2.5.53",
"#types/jasminewd2": "~2.0.2",
"#types/node": "~6.0.60",
"codelyzer": "~3.2.0",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"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": "~3.2.0",
"tslint": "~5.7.0",
"typescript": "~2.4.2",
}
Run NPM Install
npm install

First off all, where is an error in console?
Second, you need change versions for #angular/material and #angular/cdk,
just:
npm install --save #angular/material#latest #angular/cdk#latest
or
npm install --save #angular/material#5.2 #angular/cdk#5.2