I have a working app using Ionic 4 and Angular 7. In order to prepare for upgrading to Ionic 5 I first wanted to upgrade to Angular 8 and followed the instructions in https://docs.google.com/document/d/1QOpQeDifPSg6F9WycDLcbQnpqjN96ew-Ap0_CB7CcCQ/edit to the point. All seemed to work but when I try to run the application in the browser I get:
custom-elements-es5-adapter.js:13 Uncaught TypeError: Class constructor HostElement cannot be invoked without 'new'
at new j (custom-elements-es5-adapter.js:13)
at EmulatedEncapsulationDomRenderer2.createElement (platform-browser.js:2791)
at EmulatedEncapsulationDomRenderer2.createElement (platform-browser.js:3036)
at DebugRenderer2.createElement (core.js:45748)
at createElement (core.js:42862)
at createViewNodes (core.js:44166)
at callViewAction (core.js:44660)
After that I managed to get a starter project using Ionic 4 and Angular 8 working but when I copied the exact versions to my package.json, I still get the same stack trace. I am really at a loss here and would appreciate any help from you guys. Thanks!
My package.json below (without core.js - originally I had version 2, then upgraded to version 3 and then removed it altogether since apparently Angular doesn’t need it explicitly any longer. Neither helped, I still get the same error):
"dependencies": {
"@angular/common": "^8.2.14",
"@angular/core": "^8.2.14",
"@angular/fire": "^5.1.2",
"@angular/forms": "^8.2.14",
"@angular/platform-browser": "^8.2.14",
"@angular/platform-browser-dynamic": "^8.2.14",
"@angular/router": "^8.2.14",
"@ansur/leaflet-pulse-icon": "^0.1.1",
"@asymmetrik/ngx-leaflet": "^5.0.2",
"@asymmetrik/ngx-leaflet-markercluster": "^2.1.1",
"@capacitor/cli": "^1.4.0",
"@capacitor/core": "^1.4.0",
"@capacitor/ios": "^1.4.0",
"@ionic-native/badge": "^5.4.0",
"@ionic-native/core": "^5.4.0",
"@ionic-native/fcm": "^5.4.0",
"@ionic/angular": "^4.7.0",
"@ionic/pro": "2.0.4",
"@ngx-translate/core": "^11.0.1",
"@ngx-translate/http-loader": "^4.0.0",
"@types/leaflet": "^1.4.3",
"@types/leaflet.featuregroup.subgroup": "^1.0.0",
"@types/leaflet.markercluster": "^1.4.0",
"@types/lodash": "^4.14.123",
"ajv": "^6.11.0",
"cordova-background-geolocation-lt": "^2.14.2",
"cordova-plugin-background-fetch": "^5.4.1",
"cordova-plugin-badge": "^0.8.8",
"cordova-plugin-cocoalumberjack": "0.0.4",
"cordova-plugin-device": "^2.0.2",
"cordova-plugin-fcm-with-dependecy-updated": "^2.4.0",
"cordova-plugin-file": "^6.0.1",
"cordova-plugin-file-transfer": "^1.7.1",
"cordova-plugin-ionic": "^5.3.0",
"firebase": "^5.11.1",
"firebase-admin": "^7.2.0",
"ionic-logging-service": "^8.0.0",
"leaflet": "~1.3.1",
"leaflet.featuregroup.subgroup": "^1.0.2",
"leaflet.markercluster": "^1.3.0",
"lodash": "^4.17.11",
"rxjs": "^6.5.4",
"shrinkwrap": "^0.4.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"@angular-devkit/architect": "^0.800.6",
"@angular-devkit/build-angular": "~0.803.25",
"@angular-devkit/core": "^8.3.25",
"@angular-devkit/schematics": "^8.3.25",
"@angular/cli": "^8.3.25",
"@angular/compiler": "^8.2.14",
"@angular/compiler-cli": "^8.2.14",
"@angular/language-service": "^8.2.14",
"@ionic/angular-toolkit": "^2.0.0",
"@types/jest": "^23.3.14",
"@types/node": "^10.14.4",
"acorn": "^6.1.1",
"codelyzer": "^5.0.1",
"ftp-deploy": "^2.3.3",
"install": "^0.12.2",
"jasmine-core": "~3.3.0",
"jasmine-spec-reporter": "~4.2.1",
"jest": "^23.6.0",
"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.0",
"protractor": "~5.4.2",
"ts-jest": "^23.10.5",
"ts-node": "^8.1.0",
"tslint": "~5.12.0",
"typescript": "~3.5.3"
},
