@ ionic-native / push的离子问题

Question

For a few days now I have been trying to get push notifications working in ionic, I have gone over 7 tutorials so far, but each and every one of them fails once I get to a point where its time to start testing!. Is it just me or are all these tutorials way out of date?

So far I have tried tutorials from:

• c-sharpcorner.com
• saowen.com
• medium.com
• sitepoint.com
• masteringionic.com
• thielcole.github.io
• luisjordan.net

For each of these tutorials, I run into a wall regarding the Push module, one way or another I keep getting these same errors, there are some very small variations between different tutorials, but in general these are the same errors, the ones below come from the latest tutorial I followed (the luisjordan one):

From the app.component.ts file, i get an error for the constructor:
----------------------
typescript: C:/Users/***/Documents/ionic/push-luisjordan/src/app/app.component.ts, line: 15
Cannot find name 'Push'.

L15:  constructor (platform : Platform, statusBar : StatusBar, splashScreen : SplashScreen, private push : Push) {
L16:              platform.ready().then(() => {
----------------------

And from app.module.ts file, i get an error for the providers:
----------------------
typescript: C:/Users/***/Documents/ionic/push-luisjordan/src/app/app.module.ts, line: 12
Argument of type '{ declarations: (typeof HomePage | typeof MyApp)[]; imports: (ModuleWithProviders | typeof
Browse...' is not assignable to parameter of type 'NgModule'. Types of property 'providers' are
incompatible. Type '(typeof SplashScreen | PushOriginal | { provide: typeof ErrorHandler; useClass: typeof
IonicError...' is not assignable to type 'Provider[]'. Type 'typeof SplashScreen | PushOriginal | { provide:
typeof ErrorHandler; useClass: typeof IonicErrorH...' is not assignable to type 'Provider'. Type
'PushOriginal' is not assignable to type 'Provider'. Type 'PushOriginal' is not assignable to type
'ClassProvider'. Property 'provide' is missing in type 'PushOriginal'.

L12:  @NgModule({                                                                                                                                                                                                                                                                                                        
L13:    declarations: [

To prevent turning this thing into an even bigger wall of text, i have made the below pastebin page, it contains the same errors posted above, but more importantly it also contains the code of app.component.ts & app.module.ts

https://pastebin.com/RUH9egA9

To help speed things up, heres a overview of version numbers and some replies to common question's i see on other ionic questions:

$ ionic info

Ionic:

   ionic (Ionic CLI)  : 4.8.0 (C:\Users\Olivier\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.2.1

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : android 7.1.4
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.3.2, (and 7 other plugins)

System:

   NodeJS : v10.2.1 (C:\Program Files\nodejs\node.exe)
   npm    : 6.5.0
   OS     : Windows 10



$ ionic cordova plugins
> cordova plugin ls

You have been opted out of telemetry. To change this, run: cordova telemetry on.
cordova-plugin-device 2.0.2 "Device"
cordova-plugin-ionic-keyboard 2.1.3 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 2.3.2 "cordova-plugin-ionic-webview"
cordova-plugin-splashscreen 5.0.2 "Splashscreen"
cordova-plugin-statusbar 2.4.2 "StatusBar"
cordova-plugin-whitelist 1.3.3 "Whitelist"
cordova-support-google-services 1.1.0 "cordova-support-google-services"
phonegap-plugin-multidex 1.0.0 "Multidex"
phonegap-plugin-push 2.2.3 "PushPlugin"



$ ionic cordova platform list
> cordova platform ls

You have been opted out of telemetry. To change this, run: cordova telemetry on.
Installed platforms:
  android 7.1.4
Available platforms:
  browser ~5.0.1
  ios ~4.5.4
  osx ~4.0.1
  windows ~6.0.0

• In the working directory i have installed the module with 'npm install --save @ionic-native/push'
• I have made sure to add the android platform, and i test with 'ionic cordova emulate android'
• I have edited my config.xml to have a widget id that matches my firebase app (tho i guess this is getting ahead of things?)

Does anybody have any clue what could be wrong? I've been reading about this for days and I still don't know what I could be missing? Every time I run into the same issue where ionic wont accept the push module... :(

Thanks in advance, if anybody has any additional questions after this wall-o-text then please don't hesitate to ask either.

Answer 1

It looks like Ionic team recently have made changes to their native plugins.

You seem to have installed a plugin (Version >= 5.0.0) which is supported for ionic 4. Since you are using ionic 3 uninstall the plugin and install 4.20.0 version.

npm uninstall @ionic-native/push

and then

npm i -s @ionic-native/push@4.20.0

For more detailed explanation,you can check out this answer https://stackoverflow.com/a/54398403/6617276