Ionic 4 & Angular 8

Is @ionic/angular 4.6.0 ready for Angular 8 ?
I’ve tried to upgrade my app but i’ve these warnings:

npm WARN @ionic/angular@4.6.0 requires a peer of @angular-devkit/core@^7.2.1 but none is installed. You must install peer dependencies yourself.
npm WARN @ionic/angular@4.6.0 requires a peer of @angular-devkit/schematics@^7.2.1 but none is installed. You must install peer dependencies yourself.
npm WARN @ionic/angular@4.6.0 requires a peer of @angular/core@^7.2.1 but none is installed. You must install peer dependencies yourself.
npm WARN @ionic/angular@4.6.0 requires a peer of @angular/common@^7.2.1 but none is installed. You must install peer dependencies yourself.
npm WARN @ionic/angular@4.6.0 requires a peer of @angular/forms@^7.2.1 but none is installed. You must install peer dependencies yourself.
npm WARN @ionic/angular@4.6.0 requires a peer of @angular/router@^7.2.1 but none is installed. You must install peer dependencies yourself.
npm WARN @ionic/angular@4.6.0 requires a peer of @angular/compiler@^7.2.1 but none is installed. You must install peer dependencies yourself.
npm WARN @ionic/angular@4.6.0 requires a peer of @angular/compiler-cli@^7.2.1 but none is installed. You must install peer dependencies yourself.
npm WARN @ionic/angular@4.6.0 requires a peer of @angular/platform-browser@^7.2.1 but none is installed. You must install peer dependencies yourself.
npm WARN @ionic/angular@4.6.0 requires a peer of @angular/platform-browser-dynamic@^7.2.1 but none is installed. You must install peer dependencies yourself.
npm WARN @ionic/angular@4.6.0 requires a peer of zone.js@^0.8.26 but none is installed. You must install peer dependencies yourself.

I’ve to wait a new @ionic/angular version ?

It looks like your angular needs to be updated to >=7.2.1, to support the 4.6.0 update

I’ve upgraded to Angular 8…

  "dependencies": {
    "@angular/common": "^8.0.3",
    "@angular/core": "^8.0.3",
    "@angular/forms": "^8.0.3",
    "@angular/platform-browser": "^8.0.3",
    "@angular/platform-browser-dynamic": "^8.0.3",
    "@angular/router": "^8.0.3",
    "@auth0/angular-jwt": "^2.1.0",
    "@ionic-native/core": "^5.8.0",
    "@ionic-native/device": "^5.8.0",
    "@ionic-native/diagnostic": "^5.8.0",
    "@ionic-native/geolocation": "^5.8.0",
    "@ionic-native/local-notifications": "^5.8.0",
    "@ionic-native/network": "^5.8.0",
    "@ionic-native/splash-screen": "^5.8.0",
    "@ionic-native/status-bar": "^5.8.0",
    "@ionic/angular": "^4.6.0",
    "@ionic/storage": "^2.2.0",
    "@ngx-translate/core": "^11.0.1",
    "@ngx-translate/http-loader": "^4.0.0",
    "@types/cordova": "0.0.34",
    "br-mask": "0.0.7",
    "cordova-android": "8.0.0",
    "cordova-ios": "5.0.1",
    "cordova-plugin-badge": "^0.8.8",
    "cordova-plugin-device": "2.0.2",
    "cordova-plugin-geolocation": "4.0.1",
    "cordova-plugin-ionic-webview": "^4.1.1",
    "cordova-plugin-local-notification": "0.9.0-beta.2",
    "cordova-plugin-network-information": "2.0.1",
    "cordova-plugin-wifiwizard2": "^3.1.1",
    "cordova-sqlite-storage": "3.2.0",
    "cordova.plugins.diagnostic": "5.0.0",
    "core-js": "3.1.4",
    "dayjs": "^1.8.14",
    "es6-promise-plugin": "^4.2.2",
    "google-libphonenumber": "^3.2.3",
    "moment": "^2.24.0",
    "moment-duration-format": "^2.3.2",
    "ngx-mask": "^8.0.0",
    "rxjs": "^6.5.2",
    "text-mask-addons": "^3.8.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/architect": "~0.800.6",
    "@angular-devkit/build-angular": "~0.800.6",
    "@angular-devkit/core": "~8.0.6",
    "@angular-devkit/schematics": "~8.0.6",
    "@angular/cli": "~8.0.6",
    "@angular/compiler": "~8.0.3",
    "@angular/compiler-cli": "~8.0.3",
    "@angular/language-service": "~8.0.3",
    "@ionic/angular-toolkit": "~2.0.0",
    "@types/jasmine": "~3.3.13",
    "@types/jasminewd2": "~2.0.6",
    "@types/node": "~12.0.10",
    "codelyzer": "~5.1.0",
    "cordova-plugin-ionic-keyboard": "^2.1.3",
    "cordova-plugin-statusbar": "^2.4.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "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": "6.0.0",
    "ts-node": "~8.3.0",
    "tslint": "^5.18.0",
    "typescript": "3.4.5"

After some fix my app start with angular 8 so maybe warnings about @ionic/angular@4.6.0 are not blockers…

Correct, they are just warnings. 8 shouldnt be missing anything

Mike from the Ionic team posted this document to setup and test Angular 8 compatibility
–> https://docs.google.com/document/d/1QOpQeDifPSg6F9WycDLcbQnpqjN96ew-Ap0_CB7CcCQ/edit

4 Likes

I have tested and write a tutorial about it here.

1 Like

I’ve added an issue on your git…

Follow the below steps to update Ionic.Hope this will help
1)Remove Ionic/cli
2)Remove Angular/cli
3)Remove cordova
4)Uninstall Node JS
5)Check whether everything removed successfully or not

Restart your system before nnext setup
1)Install latest Node js
2)Install Cordova
3)Install Angular /cli latest
4)Install Ionic/cli latest
5)Create a demo project and run ionic serve
Hope it will help you. Thank you , Enjoy coding

I am facing an issue after updating to angular 8.

Here is the thing. I have two apps that are the same except for the theme, so I’m using a theme setup that can change based on which application is on my storage. Here is the function that loads the CSS. the app enters on it, but apparently it wont execute the line:

fileSCSS(name) {
    require(`style-loader!../theme/${name}.scss`);
  }

Perhaps something to do with require? Any help is appreciated.

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"
  },

If you could post your package.json, that would probably be useful.

Done! Added the package.json to my original post.

First thing I would do is synchronize and update everything that starts with “@angular” (including the “-devkit” stuff) to the latest available 8 (or 0.80* as warranted) and then run npm i. I suspect your problem derives from parts of your toolchain being out of sync.

Problem solved! It turned out that my old `index.html contained

<script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.0.3/custom-elements-es5-adapter.js"></script>

which was not present in the starter project with Angular 8. Instead it seems that building with Angular 8 automatically injects

<script src="runtime-es2015.js" type="module"></script><script src="runtime-es5.js" nomodule defer></script><script src="polyfills-es5.js" nomodule defer></script><script src="polyfills-es2015.js" type="module"></script><script src="styles-es2015.js" type="module"></script><script src="styles-es5.js" nomodule defer></script><script src="scripts.js" defer></script><script src="vendor-es2015.js" type="module"></script><script src="vendor-es5.js" nomodule defer></script><script src="main-es2015.js" type="module"></script><script src="main-es5.js" nomodule defer></script></body>

in the file. Removing the existing reference to custom-elements-es5-adapter.js solved the problem.

1 Like

Thanks for reporting back so that anybody else in your situation can benefit from the knowledge.

1 Like

And thanks for giving a helping hand! :slight_smile: