Update angular 5 to 6+ ngx-bootstrap error - javascript

I'm trying to update my application from angular 5 to angular 6+.
After updating a lot of packages I have this error and I'm stuck on that.
ERROR in chunk app [entry]
app.bundle.js
/home/sonyde/Documents/project/extranet/node_modules/ngx-bootstrap/esm5/ngx-bootstrap.js dc21e88b40837b73971f9f5c6a9b4b40
Unexpected token (467:27)
| function BsLocaleService() {
| this._defaultLocale = 'en';
| this._locale = new !(function webpackMissingModule() { var e = new Error("Cannot find module 'rxjs'"); e.code = 'MODULE_NOT_FOUND'; throw e; }())(this._defaultLocale);
| this._localeChange = this._locale.asObservable();
| }
ERROR in vendor.bundle.js from UglifyJs
Unexpected token: operator (!) [./node_modules/#angular/core/fesm5/core.js:4463,36][vendor.bundle.js:5560,36]
I updated angular (5.2 to 6.1), webpack (3.12.0 to 4.19.0) and rxjs (5.5.2 to 6.0.0) versions.
I don't think the error comes from uglifyjs because we already tried to remove it and the error is still there, in the console.
Does anyone have any insight on this?
My packages :
"dependencies": {
"#angular/animations": "^6.1.10",
"#angular/cdk": "^6.4.7",
"#angular/cli": "6",
"#angular/common": "^6.1.10",
"#angular/compiler": "^6.1.10",
"#angular/compiler-cli": "^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/platform-server": "^6.1.10",
"#angular/router": "^6.1.10",
"#epegzz/sass-vars-loader": "^3.3.1",
"#ngtools/webpack": "6.2.1",
"#ngx-translate/core": "^10.0.2",
"#ngx-translate/http-loader": "^3.0.1",
"#swimlane/ngx-charts": "^9.1.1",
"#types/core-js": "0.9.36",
"#types/jasmine": "2.5.38",
"#types/lodash": "ts2.0",
"#types/node": "6.0.45",
"#types/pdfjs-dist": "2.1.3",
"#types/swiper": "^3.4.3",
"#types/webpack-env": "1.12.1",
"angular2-router-loader": "0.3.4",
"angular2-template-loader": "0.6.0",
"awesome-typescript-loader": "^5.2.1",
"bootstrap-sass": "3.3.7",
"classlist.js": "^1.1.20150312",
"clean-webpack-plugin": "0.1.16",
"codelyzer": "^3.0.1",
"common-models": "2.3.2",
"conventional-changelog-cli": "^1.3.4",
"cookieconsent": "3.0.4",
"copy-webpack-plugin": "^5.0.0",
"core-js": "2.4.1",
"css-loader": "^1.0.1",
"d3": "^4.13.0",
"d3-ng2-service": "^2.2.0",
"deep-extend": "0.4.1",
"dynamic-i18n": "^1.0.5",
"extract-loader": "^5.1.0",
"extract-text-webpack-plugin": "4.0.0-beta.0",
"file-loader": "^6.2.0",
"flat": "^4.0.0",
"font-awesome": "4.7.0",
"html-webpack-exclude-assets-plugin": "^0.0.7",
"html-webpack-plugin": "3.0.0",
"htmllint": "^0.6.0",
"htmllint-cli": "^0.0.6",
"imagemin-webpack-plugin": "1.4.4",
"intl": "1.2.5",
"loader-utils": "^1.1.0",
"lodash": "4.17.2",
"mini-css-extract-plugin": "^1.3.3",
"mixgen": "1.1.7",
"moment": "^2.20.1",
"moment-range": "^3.0.3",
"ng2-pdf-viewer": "6.1.0",
"ng2-select-compat": "1.3.1",
"ngx-bootstrap": "4.3.0",
"ngx-cookieconsent": "^2.2.3",
"ngx-infinite-scroll": "^10.0.1",
"ngx-order-pipe": "^1.0.2",
"node-sass": "^4.13.1",
"node-sass-json-importer": "^3.0.2",
"parallel-webpack": "3.0.0-alpha.2",
"pdfjs-dist": "2.2.228",
"pretty-checkbox": "^3.0.3",
"raw-loader": "0.5.1",
"reflect-metadata": "0.1.8",
"release-it": "^10.0.0",
"rxjs": "6.2.2",
"sass-loader": "7.2.0",
"shelljs": "^0.7.8",
"simple-progress-webpack-plugin-with-prefix": "^1.1.1",
"sourcemapped-stacktrace": "^1.1.11",
"string-replace-loader": "2.3.0",
"style-loader": "0.23.1",
"sweetalert2": "6.6.3",
"swiper": "^3.4.2",
"to-string-loader": "^1.1.5",
"ts-loader": "^8.0.12",
"tslib": "1.10.0",
"tslint": "5.20.1",
"tslint-loader": "^3.6.0",
"typescript": "2.9.2",
"uglifyjs-webpack-plugin": "^2.2.0",
"url-loader": "0.5.7",
"web-animations-js": "2.2.2",
"webpack": "4.19.0",
"webpack-bundle-analyzer": "2.8.2",
"webpack-dev-server": "3.8.0",
"webpack-merge": "^4.1.0",
"zone.js": "0.8.29"
},
"devDependencies": {
"#angular/language-service": "^6.1.10",
"webpack-cli": "^3.3.12"
}

Related

NPM error, could not resolve dependency and conflicting peer dependency

I have trouble deploying my project on netlify because of NPM errors.
These are my dependencies.
"dependencies": {
"#angular/animations": "~15.1.1",
"#angular/cdk": "^15.1.2",
"#angular/common": "~15.1.1",
"#angular/compiler": "~15.1.1",
"#angular/core": "~15.1.1",
"#angular/forms": "~15.1.1",
"#angular/localize": "~15.1.1",
"#angular/platform-browser": "~15.1.1",
"#angular/platform-browser-dynamic": "~15.1.1",
"#angular/router": "~15.1.1",
"#angular/service-worker": "~15.1.1",
"#googlemaps/markerclustererplus": "^1.2.3",
"#ngx-translate/core": "^13.0.0",
"#ngx-translate/http-loader": "^6.0.0",
"#uiowa/digit-only": "^2.3.0",
"angular-svg-icon": "^12.0.0",
"broadcast-channel": "^4.2.0",
"date-fns": "^2.25.0",
"hammerjs": "^2.0.8",
"ngx-device-detector": "^3.0.0",
"ngx-image-cropper": "^5.0.1",
"ngx-progressbar": "^6.1.1",
"primeflex": "^3.0.1",
"primeicons": "^4.1.0",
"primeng": "^12.2.0-rc.1",
"rxjs": "~6.6.0",
"tslib": "^2.1.0",
"zone.js": "^0.11.8"
},
"devDependencies": {
"#angular-builders/jest": "^12.1.0",
"#angular-devkit/build-angular": "~15.1.2",
"#angular-eslint/builder": "15.2.0",
"#angular-eslint/eslint-plugin": "15.2.0",
"#angular-eslint/eslint-plugin-template": "15.2.0",
"#angular-eslint/schematics": "15.2.0",
"#angular-eslint/template-parser": "15.2.0",
"#angular/cli": "~15.1.2",
"#angular/compiler-cli": "~15.1.1",
"#biesbjerg/ngx-translate-extract": "^7.0.4",
"#types/googlemaps": "^3.43.3",
"#types/jasmine": "~3.6.0",
"#types/jest": "^26.0.23",
"#types/lodash": "^4.14.172",
"#types/node": "^12.11.1",
"default-passive-events": "^2.0.0",
"eslint": "^8.28.0",
"eslint-plugin-sort-class-members": "^1.11.0",
"eslint-plugin-unused-imports": "^1.1.4",
"husky": "^6.0.0",
"jasmine-core": "~3.7.0",
"jest": "^27.0.5",
"karma-coverage": "~2.0.3",
"lint-staged": "^11.0.0",
"lodash": "^4.17.21",
"npm-run-all": "^4.1.5",
"prettier": "^2.3.1",
"ts-jest": "^29.0.5",
"typescript": "^4.9.4"
}
And when doing a simple "npm install" I get this error:
errors
I have tried looking around and following many guides but nothing seems to work, for eaxample I have already tried: These steps and many other tricks I've found when googling around
reinstall node.js: works with at least version v16.18.0
https://nodejs.org/download/release/v16.18.0/
and then use npm i --force

Error: Module build failed (from ./node_modules/#angular-devkit/build-angular/src/babel/webpack-loader.js):

I was trying to install Angular Material. Then, I got this error. I deleted the node modules and I wrote npm i again. However, it's not working. How can I fix it?
When I want to run app using ng serve, I got this error:
./node_modules/ngx-print/fesm2020/ngx-print.mjs - Error: Module build failed (from ./node_modules/#angular-devkit/build-angular/src/babel/webpack-loader.js):
93 static ɵdir: i0.ɵɵDirectiveDeclaration<NgxPrintDirective, "button[ngxPrint]", never, { "previewOnly": "previewOnly"; "printSectionId": "printSectionId"; "printTitle": "printTitle"; "useExistingCss": "useExistingCss"; "printDelay": "printDelay"; "printStyle": "printStyle"; "styleSheetFile": "styleSheetFile"; }, {}, never, never, false, never>;
package.json:
{
"name": "cuba",
"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": {
"#agm/core": "^1.1.0",
"#angular/animations": "~13.0.3",
"#angular/cdk": "^11.0.1",
"#angular/common": "~13.0.3",
"#angular/compiler": "~13.0.3",
"#angular/core": "~13.0.3",
"#angular/fire": "^5.4.2",
"#angular/forms": "~13.0.3",
"#angular/localize": "~13.0.3",
"#angular/platform-browser": "~13.0.3",
"#angular/platform-browser-dynamic": "~13.0.3",
"#angular/router": "~13.0.3",
"#angular/service-worker": "~13.0.3",
"#asymmetrik/ngx-leaflet": "^7.0.0",
"#auth0/angular-jwt": "^5.1.0",
"#ckeditor/ckeditor5-angular": "^1.2.3",
"#ckeditor/ckeditor5-build-classic": "^20.0.0",
"#ckeditor/ckeditor5-build-inline": "^20.0.0",
"#ctrl/ngx-emoji-mart": "^3.1.0",
"#kolkov/angular-editor": "^1.1.2",
"#ks89/angular-modal-gallery": "^7.2.5",
"#ng-bootstrap/ng-bootstrap": "^6.1.0",
"#ng-select/ng-select": "^4.0.0",
"#ngx-loading-bar/core": "^5.1.0",
"#ngx-loading-bar/http-client": "^5.1.0",
"#ngx-loading-bar/router": "^5.1.0",
"#ngx-translate/core": "^13.0.0",
"#ngx-translate/http-loader": "^6.0.0",
"#sweetalert2/ngx-sweetalert2": "^8.1.1",
"#swimlane/ngx-charts": "^14.0.0",
"#swimlane/ngx-datatable": "^17.1.0",
"angular-archwizard": "^6.1.0",
"angular-calendar": "^0.28.16",
"angular-count-to": "0.0.3",
"angular-tree-component": "^8.5.6",
"angular2_photoswipe": "^8.0.1",
"angular2-knob": "^1.1.15",
"angular2-multiselect-dropdown": "^4.6.3",
"angularx-flatpickr": "^6.3.1",
"animate.css": "^4.1.0",
"apexcharts": "^3.19.3",
"bootstrap": "^4.5.2",
"canvasjs": "^1.8.3",
"chart.js": "^2.9.3",
"chartist": "^0.11.4",
"crypto": "^1.0.1",
"crypto-js": "^4.1.1",
"date-fns": "^2.14.0",
"feather-icons": "^4.26.0",
"file-saver": "^2.0.5",
"firebase": "^7.15.5",
"flatpickr": "^4.6.3",
"font-awesome": "^4.7.0",
"hammerjs": "^2.0.8",
"knob": "^1.1.0",
"leaflet": "^1.6.0",
"mousetrap": "^1.6.5",
"ng-apexcharts": "^1.3.0",
"ng-chartist": "^4.1.0",
"ng-pick-datetime": "^7.0.0",
"ng2-charts": "^2.3.2",
"ng2-dragula": "^2.1.1",
"ng2-google-charts": "^6.0.0",
"ng2-search-filter": "^0.5.1",
"ng5-slider": "^1.2.4",
"ngx-ckeditor": "^8.0.0",
"ngx-cookie-service": "^3.0.3",
"ngx-crystal-gallery": "^1.1.5",
"ngx-datatable": "^1.0.3",
"ngx-dropzone": "^2.5.0",
"ngx-dropzone-wrapper": "^9.0.0",
"ngx-editor": "^5.0.0-alpha.9",
"ngx-image-cropper": "^3.1.9",
"ngx-joyride": "^2.2.11",
"ngx-masonry": "^10.0.0",
"ngx-masonry-gallery": "^3.0.0",
"ngx-owl-carousel-o": "^3.0.1",
"ngx-perfect-scrollbar": "^9.0.0",
"ngx-print": "^1.2.0-beta.5",
"ngx-router-animations": "0.0.9",
"ngx-toastr": "^12.1.0",
"photoswipe": "^4.1.3",
"rxjs": "~6.5.5",
"sweetalert2": "^9.14.4",
"tslib": "^2.0.0",
"xlsx": "^0.18.5",
"xlsx-style": "^0.8.13",
"zone.js": "~0.11.4"
},
"devDependencies": {
"#angular-devkit/build-angular": "~13.0.4",
"#angular/cli": "~13.0.4",
"#angular/compiler-cli": "~13.0.3",
"#angular/language-service": "~13.0.3",
"#schematics/angular": "^14.2.1",
"#types/chartist": "^0.9.48",
"#types/crypto-js": "^4.1.1",
"#types/feather-icons": "^4.7.0",
"#types/hammerjs": "^2.0.36",
"#types/jasmine": "~3.5.11",
"#types/jasminewd2": "~2.0.3",
"#types/leaflet": "^1.5.13",
"#types/mousetrap": "^1.6.3",
"#types/node": "^14.18.34",
"codelyzer": "^5.2.2",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.3.2",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~3.3.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "~8.10.2",
"tslint": "~6.1.0",
"typescript": "~4.4.4"
}
}
if Angular version is from 7.0.0 - 14.1.0
use command npm i ngx-print#1.2.1
if Angular version is >14
use command npm install ngx-print
it works fine for me

Angular source-map-explorer debug a dependency

Problem
In my main.js bundle there is a single massive node_module dependency that does not make sense. ngx-translate-core • 2.85MB in node_modules
Expected behaviour
The ngx-translate-core.mjs package should only be 17.5Kb according to bundlephobia: #ngx-translate/core#14.0.0.
Attempted solutions
I have tried upgrading Angular from version 12 to 13 and now to 14. When it was Angular 12 it appeared as unsupportedIterableToArray • 2.85 MB
Changing the tsconfig.module to CommonJS also caused the chunk to map to a different npm package
ngrx-store-localstorage • 2.9 MB
Is there a way to see the dependency tree that webpack uses internally in order to see what causes this to be bundled?
package.json:
"dependencies": {
"#angular/animations": "^14.2.0",
"#angular/cdk": "^14.2.0",
"#angular/common": "^14.2.0",
"#angular/compiler": "^14.2.0",
"#angular/core": "^14.2.0",
"#angular/forms": "^14.2.0",
"#angular/localize": "^14.2.0",
"#angular/material": "14.2.0",
"#angular/material-moment-adapter": "14.2.0",
"#angular/platform-browser": "^14.2.0",
"#angular/platform-browser-dynamic": "^14.2.0",
"#angular/router": "^14.2.0",
"#ng-bootstrap/ng-bootstrap": "^13.0.0",
"#ng-idle/core": "^11.1.0",
"#ng-idle/keepalive": "^11.0.3",
"#ngrx/effects": "^14.2.0",
"#ngrx/router-store": "^14.2.0",
"#ngrx/store": "^14.2.0",
"#ngrx/store-devtools": "^14.2.0",
"#ngx-translate/core": "14.0.0",
"#ngx-translate/http-loader": "^6.0.0",
"#types/lodash": "^4.14.168",
"aws-amplify": "^4.3.5",
"aws-sdk": "^2.1143.0",
"core-js": "^2.6.12",
"date-fns": "^2.28.0",
"date-fns-tz": "^1.3.4",
"eslint-plugin-unused-imports": "^2.0.0",
"html2canvas": "^1.0.0-rc.7",
"jspdf": "^2.3.1",
"jszip": "^3.5.0",
"jszip-utils": "^0.1.0",
"lodash": "^4.17.21",
"moment": "^2.29.2",
"ngrx-store-localstorage": "14.0.0",
"ngx-logger": "^4.0.6",
"ngx-photo-editor": "^0.3.6",
"pdf417-generator": "^1.0.3",
"rxjs": "7.5.6",
"stream-browserify": "^3.0.0",
"utf8": "^3.0.0",
"util": "^0.12.4",
"zone.js": "~0.11.4"
},
"devDependencies": {
"tslib": "^2.0.0",
"#angular-devkit/build-angular": "^14.2.1",
"#angular-eslint/builder": "14.0.3",
"#angular-eslint/eslint-plugin": "14.0.3",
"#angular-eslint/eslint-plugin-template": "14.0.3",
"#angular-eslint/schematics": "14.0.3",
"#angular-eslint/template-parser": "14.0.3",
"#angular/cli": "14.2.0",
"#angular/compiler-cli": "^14.2.0",
"#angular/language-service": "^14.2.0",
"#types/file-saver": "^2.0.3",
"#types/graphql": "^14.5.0",
"#types/jasminewd2": "~2.0.3",
"#types/jest": "^26.0.20",
"#types/jszip": "^3.4.1",
"#types/node": "^12.19.14",
"#typescript-eslint/eslint-plugin": "^5.36.2",
"#typescript-eslint/parser": "^5.36.2",
"canvas": "^2.7.0",
"commander": "^6.2.1",
"crypto-browserify": "^3.12.0",
"csvtojson": "^2.0.10",
"cypress-file-upload": "^5.0.8",
"dependency-cruiser": "^10.0.1",
"eslint": "^8.23.0",
"fast-csv": "^4.3.6",
"graphql": "^15.3.0",
"jasmine-spec-reporter": "~5.0.0",
"jest": "^27.3.1",
"jest-junit": "^13.0.0",
"jest-preset-angular": "^10.1.0",
"ng-packagr": "^14.2.0",
"ngx-translate-testing": "6.1.0",
"protractor": "~7.0.0",
"stream-browserify": "^3.0.0",
"ts-node": "~8.3.0",
"typescript": "~4.6.4"
},

electron-forge package command hangs on arch: x64, no out folder is generated

I'm fairly new to Electron, and I'm running into a problem when I go to npm run package my project. It hangs right there. I've tried everything from npm cache clear --force to reinstalling node. I can provide more files and information as needed, but I've included my package.json below. Sorry if this is a noob question or the solution is obvious, but I'm not really sure what to do here. I can't even package or make the default starter project from electron-forge's github repo, I run into the same problem. Thank you for your time.
{
"name": "nuken",
"productName": "nuken",
"version": "8.0.0",
"description": "nuken is a development environment for web-based applications.",
"main": "src/index.js",
"scripts": {
"start": "electron-forge start",
"package": "electron-forge package",
"make": "electron-forge make",
"publish": "electron-forge publish",
"lint": "eslint src --color"
},
"keywords": [],
"author": "nuken Dev Team",
"license": "MIT",
"config": {
"forge": {
"packagerConfig": {},
"makers": [
{
"name": "#electron-forge/maker-deb",
"config": {
"name": "nuken"
},
"platforms": [
"darwin",
"linux"
]
},
{
"name": "#electron-forge/maker-rpm",
"platforms": [
"darwin",
"linux"
],
"config": {}
},
{
"name": "#electron-forge/maker-squirrel",
"config": {
"name": "nuken"
},
"platforms": [
"darwin",
"linux"
]
},
{
"name": "#electron-forge/maker-appx",
"config": {
"packageName": "",
"name": "nuken"
},
"platforms": [
"darwin",
"linux"
]
},
{
"name": "#electron-forge/maker-zip",
"platforms": [
"darwin"
]
}
],
"publishers": [
{
"config": {
"repository": {
"name": "",
"owner": ""
}
},
"name": "#electron-forge/publisher-github",
"platforms": "darwin"
}
]
}
},
"dependencies": {
"#electron/remote": "^2.0.8",
"abbrev": "^1.1.1",
"agent-base": "^6.0.2",
"agentkeepalive": "^4.2.1",
"aggregate-error": "^3.1.0",
"ajv": "^6.12.6",
"ansi-escapes": "^4.3.2",
"ansi-regex": "^5.0.1",
"ansi-styles": "^4.3.0",
"aproba": "^2.0.0",
"are-we-there-yet": "^3.0.0",
"asar": "^3.1.0",
"asn1": "^0.2.6",
"assert-plus": "^1.0.0",
"async": "^0.1.22",
"asynckit": "^0.4.0",
"at-least-node": "^1.0.0",
"author-regex": "^1.0.0",
"available-typed-arrays": "^1.0.5",
"aws-sign2": "^0.7.0",
"aws4": "^1.11.0",
"balanced-match": "^1.0.2",
"base64-js": "^1.5.1",
"bcrypt-pbkdf": "^1.0.2",
"bl": "^4.1.0",
"bluebird": "^3.7.2",
"boolean": "^3.2.0",
"brace-expansion": "^1.1.11",
"braces": "^3.0.2",
"buffer": "^5.7.1",
"buffer-alloc": "^1.2.0",
"buffer-alloc-unsafe": "^1.1.0",
"buffer-crc32": "^0.2.13",
"buffer-equal": "^1.0.0",
"buffer-fill": "^1.0.0",
"buffer-from": "^1.1.2",
"cacache": "^15.3.0",
"cacheable-lookup": "^5.0.4",
"cacheable-request": "^6.1.0",
"call-bind": "^1.0.2",
"caseless": "^0.12.0",
"chalk": "^4.1.2",
"chardet": "^0.7.0",
"chownr": "^2.0.0",
"chromium-pickle-js": "^0.2.0",
"classnames": "^2.3.1",
"clean-stack": "^2.2.0",
"cli-cursor": "^3.1.0",
"cli-spinners": "^2.6.1",
"cli-width": "^3.0.0",
"clone": "^1.0.4",
"clone-response": "^1.0.2",
"code-point-at": "^1.1.0",
"color-convert": "^2.0.1",
"color-name": "^1.1.4",
"color-support": "^1.1.3",
"colors": "^1.0.3",
"combined-stream": "^1.0.8",
"commander": "^4.1.1",
"compare-version": "^0.1.2",
"compress-brotli": "^1.3.8",
"concat-map": "^0.0.1",
"concat-stream": "^1.6.2",
"config-chain": "^1.1.13",
"console-control-strings": "^1.1.0",
"core-util-is": "^1.0.2",
"cross-spawn": "^7.0.3",
"cross-spawn-windows-exe": "^1.2.0",
"cross-zip": "^4.0.0",
"cuint": "^0.2.2",
"custom-electron-titlebar": "^4.1.0",
"dashdash": "^1.14.1",
"debug": "^2.6.9",
"decompress-response": "^3.3.0",
"deep-equal": "^2.0.5",
"deepmerge": "^4.2.2",
"defaults": "^1.0.3",
"defer-to-connect": "^1.1.3",
"define-lazy-prop": "^2.0.0",
"define-properties": "^1.1.4",
"delayed-stream": "^1.0.0",
"delegates": "^1.0.0",
"depd": "^1.1.2",
"detect-libc": "^1.0.3",
"detect-node": "^2.1.0",
"dir-compare": "^2.4.0",
"duplexer3": "^0.1.4",
"ecc-jsbn": "^0.1.2",
"electron-compile": "^6.4.4",
"electron-dl": "^3.3.1",
"electron-installer-common": "^0.10.3",
"electron-is-dev": "^0.3.0",
"electron-notarize": "^1.2.1",
"electron-prompt": "^1.7.0",
"electron-rebuild": "^3.2.7",
"electron-squirrel-startup": "^1.0.0",
"emoji-regex": "^8.0.0",
"encodeurl": "^1.0.2",
"encoding": "^0.1.13",
"end-of-stream": "^1.4.4",
"env-paths": "^2.2.1",
"err-code": "^2.0.3",
"error-ex": "^1.3.2",
"es-abstract": "^1.20.1",
"es-get-iterator": "^1.1.2",
"es-to-primitive": "^1.2.1",
"es6-error": "^4.1.1",
"escalade": "^3.1.1",
"escape-goat": "^2.1.1",
"escape-string-regexp": "^1.0.5",
"execa": "^1.0.0",
"expand-tilde": "^2.0.2",
"ext-list": "^2.2.2",
"ext-name": "^5.0.0",
"extend": "^3.0.2",
"external-editor": "^3.1.0",
"extract-zip": "^2.0.1",
"extsprintf": "^1.3.0",
"fast-deep-equal": "^3.1.3",
"fast-glob": "^3.2.11",
"fast-json-stable-stringify": "^2.1.0",
"fastq": "^1.13.0",
"fd-slicer": "^1.1.0",
"figures": "^3.2.0",
"filename-reserved-regex": "^2.0.0",
"filenamify": "^4.3.0",
"fill-range": "^7.0.1",
"find-up": "^5.0.0",
"flora-colossus": "^1.0.1",
"for-each": "^0.3.3",
"forever-agent": "^0.6.1",
"form-data": "^2.3.3",
"frameless-titlebar": "^2.1.4",
"fresh": "^0.1.0",
"fs-extra": "^10.1.0",
"fs-minipass": "^2.1.0",
"fs.realpath": "^1.0.0",
"function-bind": "^1.1.1",
"function.prototype.name": "^1.1.5",
"functions-have-names": "^1.2.3",
"galactus": "^0.2.1",
"gauge": "^4.0.4",
"get-caller-file": "^2.0.5",
"get-installed-path": "^2.1.1",
"get-intrinsic": "^1.1.1",
"get-package-info": "^1.0.0",
"get-stream": "^5.2.0",
"get-symbol-description": "^1.0.0",
"getpass": "^0.1.7",
"github-url-to-object": "^4.0.6",
"glob": "^7.2.2",
"glob-parent": "^5.1.2",
"global-agent": "^3.0.0",
"global-modules": "^1.0.0",
"global-prefix": "^1.0.2",
"global-tunnel-ng": "^2.7.1",
"globalthis": "^1.0.3",
"got": "^12.1.0",
"graceful-fs": "^4.2.10",
"graceful-readlink": "^1.0.1",
"har-schema": "^2.0.0",
"har-validator": "^5.1.5",
"has": "^1.0.3",
"has-bigints": "^1.0.2",
"has-flag": "^4.0.0",
"has-property-descriptors": "^1.0.0",
"has-symbols": "^1.0.3",
"has-tostringtag": "^1.0.0",
"has-unicode": "^2.0.1",
"homedir-polyfill": "^1.0.3",
"hosted-git-info": "^2.8.9",
"http-cache-semantics": "^4.1.0",
"http-proxy": "^0.10.0",
"http-proxy-agent": "^4.0.1",
"http-signature": "^1.2.0",
"http2-wrapper": "^1.0.3",
"https-proxy-agent": "^5.0.1",
"humanize-ms": "^1.2.1",
"i": "^0.3.7",
"iconv-lite": "^0.4.24",
"ieee754": "^1.2.1",
"imurmurhash": "^0.1.4",
"indent-string": "^4.0.0",
"infer-owner": "^1.0.4",
"inflight": "^1.0.6",
"inherits": "^2.0.4",
"ini": "^1.3.8",
"inquirer": "^8.2.4",
"internal-slot": "^1.0.3",
"ip": "^1.1.8",
"is-arguments": "^1.1.1",
"is-arrayish": "^0.2.1",
"is-bigint": "^1.0.4",
"is-boolean-object": "^1.1.2",
"is-callable": "^1.2.4",
"is-core-module": "^2.9.0",
"is-date-object": "^1.0.5",
"is-docker": "^2.2.1",
"is-extglob": "^2.1.1",
"is-fullwidth-code-point": "^3.0.0",
"is-glob": "^4.0.3",
"is-interactive": "^1.0.0",
"is-lambda": "^1.0.1",
"is-map": "^2.0.2",
"is-negative-zero": "^2.0.2",
"is-number": "^7.0.0",
"is-number-object": "^1.0.7",
"is-plain-obj": "^1.1.0",
"is-regex": "^1.1.4",
"is-set": "^2.0.2",
"is-shared-array-buffer": "^1.0.2",
"is-stream": "^1.1.0",
"is-string": "^1.0.7",
"is-symbol": "^1.0.4",
"is-typed-array": "^1.1.9",
"is-typedarray": "^1.0.0",
"is-unicode-supported": "^0.1.0",
"is-url": "^1.2.4",
"is-weakmap": "^2.0.1",
"is-weakref": "^1.0.2",
"is-weakset": "^2.0.2",
"is-windows": "^1.0.2",
"is-wsl": "^2.2.0",
"isarray": "^0.0.1",
"isbinaryfile": "^3.0.3",
"isexe": "^2.0.0",
"isstream": "^0.1.2",
"jquery": "^3.6.0",
"js-tokens": "^4.0.0",
"jsbn": "^0.1.1",
"json-buffer": "^3.0.0",
"json-schema": "^0.4.0",
"json-schema-traverse": "^0.4.1",
"json-stringify-safe": "^5.0.1",
"jsonfile": "^6.1.0",
"jsprim": "^1.4.2",
"junk": "^3.1.0",
"keypress": "^0.1.0",
"keyv": "^3.1.0",
"load-json-file": "^2.0.0",
"locate-path": "^6.0.0",
"lodash": "^4.17.21",
"lodash._reinterpolate": "^3.0.0",
"lodash.get": "^4.4.2",
"lodash.template": "^4.5.0",
"lodash.templatesettings": "^4.2.0",
"log-symbols": "^4.1.0",
"loose-envify": "^1.4.0",
"lowercase-keys": "^1.0.1",
"lru-cache": "^6.0.0",
"lzma-native": "^8.0.6",
"make-fetch-happen": "^9.1.0",
"map-age-cleaner": "^0.1.3",
"matcher": "^3.0.0",
"mem": "^4.3.0",
"merge2": "^1.4.1",
"micromatch": "^4.0.5",
"mime": "^1.2.6",
"mime-db": "^1.52.0",
"mime-types": "^2.1.35",
"mimic-fn": "^2.1.0",
"mimic-response": "^1.0.1",
"minimatch": "^3.1.2",
"minimist": "^1.2.6",
"minipass": "^3.1.6",
"minipass-collect": "^1.0.2",
"minipass-fetch": "^1.4.1",
"minipass-flush": "^1.0.5",
"minipass-pipeline": "^1.2.4",
"minipass-sized": "^1.0.3",
"minizlib": "^2.1.2",
"mkdirp": "^1.0.4",
"modify-filename": "^1.1.0",
"ms": "^2.0.0",
"mute-stream": "^0.0.8",
"ncp": "^0.2.7",
"negotiator": "^0.6.3",
"nice-try": "^1.0.5",
"node-abi": "^3.15.0",
"node-addon-api": "^3.2.1",
"node-api-version": "^0.1.4",
"node-fetch": "^2.6.7",
"node-gyp": "^8.4.1",
"node-gyp-build": "^4.4.0",
"nopt": "^5.0.0",
"normalize-package-data": "^2.5.0",
"normalize-url": "^4.5.1",
"npm-conf": "^1.1.3",
"npm-run-path": "^2.0.2",
"npmlog": "^6.0.2",
"nugget": "^2.0.2",
"number-is-nan": "^1.0.1",
"oauth-sign": "^0.9.0",
"object-assign": "^4.1.1",
"object-inspect": "^1.12.2",
"object-is": "^1.1.5",
"object-keys": "^1.1.1",
"object.assign": "^4.1.2",
"once": "^1.4.0",
"onetime": "^5.1.2",
"open": "^8.4.0",
"optimist": "^0.3.7",
"ora": "^5.4.1",
"os-tmpdir": "^1.0.2",
"p-cancelable": "^1.1.0",
"p-defer": "^1.0.0",
"p-finally": "^1.0.0",
"p-is-promise": "^2.1.0",
"p-limit": "^3.1.0",
"p-locate": "^5.0.0",
"p-map": "^4.0.0",
"p-try": "^2.2.0",
"parse-author": "^2.0.0",
"parse-json": "^2.2.0",
"parse-ms": "^2.1.0",
"parse-passwd": "^1.0.0",
"path-exists": "^4.0.0",
"path-is-absolute": "^1.0.1",
"path-key": "^3.1.1",
"path-parse": "^1.0.7",
"path-type": "^2.0.0",
"pend": "^1.2.0",
"performance-now": "^2.1.0",
"picomatch": "^2.3.1",
"pify": "^3.0.0",
"pkg-dir": "^4.2.0",
"pkginfo": "^0.2.3",
"plist": "^3.0.5",
"prepend-http": "^2.0.0",
"pretty-bytes": "^4.0.2",
"pretty-ms": "^7.0.1",
"process-nextick-args": "^2.0.1",
"progress": "^2.0.3",
"progress-stream": "^1.2.0",
"promise-inflight": "^1.0.1",
"promise-retry": "^2.0.1",
"prop-types": "^15.8.1",
"proto-list": "^1.2.4",
"psl": "^1.8.0",
"pump": "^3.0.0",
"punycode": "^2.1.1",
"pupa": "^2.1.1",
"qs": "^6.5.3",
"queue-microtask": "^1.2.3",
"quick-lru": "^5.1.1",
"range-parser": "^0.0.4",
"rcedit": "^3.0.1",
"react": "^16.14.0",
"react-is": "^16.13.1",
"read-pkg": "^2.0.0",
"read-pkg-up": "^2.0.0",
"readable-stream": "^3.6.0",
"regexp.prototype.flags": "^1.4.3",
"request": "^2.88.2",
"require-directory": "^2.1.1",
"resolve": "^1.22.0",
"resolve-alpn": "^1.2.1",
"resolve-dir": "^1.0.1",
"resolve-package": "^1.0.1",
"responselike": "^1.0.2",
"restore-cursor": "^3.1.0",
"retry": "^0.12.0",
"reusify": "^1.0.4",
"rimraf": "^3.0.2",
"roarr": "^2.15.4",
"run-async": "^2.4.1",
"run-parallel": "^1.2.0",
"rxjs": "^7.5.5",
"safe-buffer": "^5.2.1",
"safer-buffer": "^2.1.2",
"semver": "^7.3.7",
"semver-compare": "^1.0.0",
"send": "^0.1.0",
"serialize-error": "^7.0.1",
"set-blocking": "^2.0.0",
"shebang-command": "^2.0.0",
"shebang-regex": "^3.0.0",
"side-channel": "^1.0.4",
"signal-exit": "^3.0.7",
"single-line-log": "^1.1.2",
"smart-buffer": "^4.2.0",
"socks": "^2.6.2",
"socks-proxy-agent": "^6.2.0",
"sort-keys": "^1.1.2",
"sort-keys-length": "^1.0.1",
"source-map": "^0.6.1",
"source-map-support": "^0.5.21",
"spdx-correct": "^3.1.1",
"spdx-exceptions": "^2.3.0",
"spdx-expression-parse": "^3.0.1",
"spdx-license-ids": "^3.0.11",
"speedometer": "^0.1.4",
"sprintf-js": "^1.1.2",
"sshpk": "^1.17.0",
"ssri": "^8.0.1",
"string_decoder": "^1.3.0",
"string-width": "^4.2.3",
"string.prototype.trimend": "^1.0.5",
"string.prototype.trimstart": "^1.0.5",
"strip-ansi": "^6.0.1",
"strip-bom": "^3.0.0",
"strip-eof": "^1.0.0",
"strip-outer": "^1.0.1",
"sudo-prompt": "^9.2.1",
"sumchecker": "^3.0.1",
"supports-color": "^7.2.0",
"supports-preserve-symlinks-flag": "^1.0.0",
"tar": "^6.1.11",
"temp": "^0.9.4",
"throttleit": "^0.0.2",
"through": "^2.3.8",
"through2": "^0.2.3",
"tmp": "^0.0.33",
"tmp-promise": "^3.0.3",
"to-readable-stream": "^1.0.0",
"to-regex-range": "^5.0.1",
"tough-cookie": "^2.5.0",
"tr46": "^0.0.3",
"trim-repeated": "^1.0.0",
"tslib": "^2.4.0",
"tunnel": "^0.0.6",
"tunnel-agent": "^0.6.0",
"tweetnacl": "^0.14.5",
"type-fest": "^0.21.3",
"typedarray": "^0.0.6",
"unbox-primitive": "^1.0.2",
"underscore": "^1.4.4",
"unique-filename": "^1.1.1",
"unique-slug": "^2.0.2",
"universalify": "^2.0.0",
"unused-filename": "^2.1.0",
"update-electron-app": "^2.0.1",
"uri-js": "^4.4.1",
"url-parse-lax": "^3.0.0",
"username": "^5.1.0",
"util-deprecate": "^1.0.2",
"utile": "^0.1.7",
"uuid": "^3.4.0",
"validate-npm-package-license": "^3.0.4",
"verror": "^1.10.0",
"wcwidth": "^1.0.1",
"webidl-conversions": "^3.0.1",
"whatwg-url": "^5.0.0",
"which": "^2.0.2",
"which-boxed-primitive": "^1.0.2",
"which-collection": "^1.0.1",
"which-typed-array": "^1.1.8",
"wide-align": "^1.1.5",
"word-wrap": "^1.2.3",
"wordwrap": "^0.0.3",
"wrap-ansi": "^7.0.0",
"wrappy": "^1.0.2",
"xmlbuilder": "^9.0.7",
"xtend": "^2.1.2",
"yallist": "^4.0.0",
"yargs-parser": "^20.2.9",
"yarn": "^1.22.19",
"yarn-or-npm": "^3.0.1",
"yauzl": "^2.10.0",
"yocto-queue": "^0.1.0"
},
"devDependencies": {
"#electron-forge/cli": "^6.0.0-beta.64",
"#electron-forge/maker-appx": "^6.0.0-beta.64",
"#electron-forge/maker-deb": "^6.0.0-beta.64",
"#electron-forge/maker-rpm": "^6.0.0-beta.64",
"#electron-forge/maker-squirrel": "^6.0.0-beta.64",
"#electron-forge/maker-zip": "^6.0.0-beta.64",
"#electron-forge/publisher-github": "^6.0.0-beta.64",
"babel-plugin-transform-async-to-generator": "^6.24.1",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"coffee-script": "^1.4.0",
"electron": "^18.2.3",
"eslint": "^3",
"eslint-config-airbnb": "^15",
"eslint-plugin-import": "^2",
"eslint-plugin-jsx-a11y": "^5",
"eslint-plugin-react": "^7"
}
}

typeError: Cannot assign to read only property 'tView' of object '[object Object]' in angular 9.0.4

I've been using Angular 8, and recently updated to Angular 9. But when I run the project, it showd me this error in console:
Error: Uncaught (in promise): TypeError: Cannot assign to read only property 'tView' of object '[object Object]'
TypeError: Cannot assign to read only property 'tView' of object '[object Object]'
at getOrCreateTComponentView (core.js:7621)
at createRootComponentView (core.js:18895)
at
this is my package.json :
"dependencies": {
"#angular/animations": "^9.0.4",
"#angular/cdk": "^9.1.0",
"#angular/common": "^9.0.4",
"#angular/compiler": "^9.0.4",
"#angular/core": "^9.0.4",
"#angular/flex-layout": "^9.0.0-beta.28",
"#angular/forms": "^9.0.4",
"#angular/localize": "^9.0.4",
"#angular/platform-browser": "^9.0.4",
"#angular/platform-browser-dynamic": "^9.0.4",
"#angular/platform-server": "^9.0.4",
"#angular/router": "^9.0.4",
"#aspnet/signalr": "^1.1.4",
"#mat-datetimepicker/core": "^3.0.0",
"#ng-bootstrap/ng-bootstrap": "^4.2.1",
"#ngrx/effects": "^8.0.1",
"#ngrx/entity": "^8.0.1",
"#ngrx/router-store": "^8.0.1",
"#ngrx/store": "^8.0.1",
"#ngrx/store-devtools": "^8.0.1",
"#ngx-loading-bar/core": "^4.2.0",
"#ngx-translate/core": "^11.0.1",
"#types/lodash": "^4.14.134",
"angular-in-memory-web-api": "^0.8.0",
"angular2-permission": "^0.1.3",
"angular2-promise-buttons": "^4.0.0",
"chart.js": "^2.8.0",
"chartist": "^0.11.2",
"classlist.js": "^1.1.20150312",
"core-js": "^3.1.4",
"hammerjs": "^2.0.8",
"highlight.js": "^9.15.8",
"jwt-decode": "^2.2.0",
"lodash": "^4.17.11",
"material-design-icons": "^3.0.1",
"moment": "^2.24.0",
"ng-inline-svg": "^8.4.1",
"ng2-jalali-date-picker": "^2.2.7",
"ngrx-store-freeze": "^0.2.4",
"ngx-clipboard": "^12.1.0",
"ngx-daterangepicker-material": "^2.1.3",
"ngx-highlightjs": "^3.0.3",
"ngx-material-file-input": "^1.1.1",
"ngx-perfect-scrollbar": "^8.0.0",
"ngx-permissions": "^7.0.2",
"ngx-toastr": "^10.0.4",
"object-path": "^0.11.4",
"rxjs": "^6.5.2",
"tslib": "^1.10.0",
"web-animations-js": "^2.3.1",
"zone.js": "~0.10.2"
},
"devDependencies": {
"#angular-devkit/build-angular": "^0.900.4",
"#angular/cli": "^9.0.4",
"#angular/compiler-cli": "^9.0.4",
"#angular/language-service": "^9.0.4",
"#angular/material": "^9.1.0",
"#angular/material-moment-adapter": "^9.1.0",
"#ngrx/schematics": "^8.0.1",
"#types/chartist": "^0.9.46",
"#types/highlight.js": "^9.12.3",
"#types/jasmine": "~3.3.13",
"#types/jasminewd2": "~2.0.6",
"#types/node": "~12.0.8",
"#types/object-path": "^0.11.0",
"codelyzer": "^5.1.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.5",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.2",
"protractor": "~5.4.2",
"ts-node": "~8.2.0",
"tslint": "~5.17.0",
"typescript": "^3.6.4",
"webpack-bundle-analyzer": "^3.3.2"
}
This is a problem with NGRX Store and Ivy runtime which began in Angular 9
The problem is best explained here: https://github.com/ngrx/platform/issues/2109
The current workaround (16th March 2020) is to disable both
strictStateImmutability and strictActionImmutability
in your StoreModule metareducers
EffectsModule.forRoot([AuthEffects]),
StoreModule.forRoot(reducers,
{ metaReducers,
runtimeChecks: {
strictStateImmutability: false,
strictActionImmutability: false,
}
}
),
Of course, this is a workaround and doesn't solve the problem. An issue is currently open with NGRX https://github.com/ngrx/platform/issues/2404
You are using ngrx with ngrx-store-freeze. Most likely you have an action or data model in your store which contains an angular component/template/directive. If you remove storeFreeze from your metaReducers, you will most likely not see the error anymore.
Nevertheless, you should find out what reducer is adding this component to the store, and find another way to handle this. It's definitely not a good idea to have such objects in your store anyways
I'm just sharing my 2 cents here as I found out that I made a mistake, which lead to kind of the same error. I was doing a mutation inside the selector of ngrx.
My error was:
Cannot assign to read only property '0' of object '[object Array]'
export const selectInspections = createSelector(selectInspectionsFeature, (state) =>
state.inspections.sort((a, b) => (a.dateTimeUpdated > b.dateTimeUpdated ? -1 : 1))
);
Solved it by changing it like this:
export const selectInspections = createSelector(selectInspectionsFeature,
(state) =>
[...state.inspections].sort((a, b) => (a.dateTimeUpdated > b.dateTimeUpdated ? -1 : 1))
);
Now I am not modifying the state inside the selector.

Categories

Resources