Ionic 4 Cannot Inject Push into components

Hi, hope someone can help. I cannot get the cordova-plugin-push component to work on Ionic 4.

I get the following error on build

Types of property 'providers' are incompatible.
    Type '(PushOriginal | typeof SplashScreen | typeof TokenProvider | { provide: typeof RouteReuseStrategy...' is not assignable to type 'Provider[]'.
      Type 'PushOriginal | typeof SplashScreen | typeof TokenProvider | { provide: typeof RouteReuseStrategy;...' 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'.

For some reason typescript is insisting I use
import { PushOriginal } from '@ionic-native/push'

if I specify Push it just get an error ‘Cannot find Push’ even though it lets me import it.
I have tried clearing down node_modules etc and re-installing.

Here are my dependencies from package-json

"dependencies": {
    "@angular/common": "~6.1.1",
    "@angular/core": "~6.1.1",
    "@angular/forms": "~6.1.1",
    "@angular/http": "~6.1.1",
    "@angular/platform-browser": "~6.1.1",
    "@angular/platform-browser-dynamic": "~6.1.1",
    "@angular/router": "~6.1.1",
    "@ionic-native/calendar": "^5.0.0-beta.18",
    "@ionic-native/core": "^5.0.0-beta.18",
    "@ionic-native/push": "^5.0.0-beta.18",
    "@ionic-native/splash-screen": "^5.0.0-beta.18",
    "@ionic-native/status-bar": "^5.0.0-beta.18",
    "@ionic/angular": "^4.0.0-beta.11",
    "cordova-browser": "5.0.4",
    "cordova-plugin-calendar": "^5.1.2",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-ionic-keyboard": "^2.1.2",
    "cordova-plugin-ionic-webview": "^2.0.3",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-statusbar": "^2.4.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "core-js": "^2.5.3",
    "moment": "^2.22.2",
    "phonegap-plugin-push": "^2.2.3",
    "rxjs": "^6.3.2",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/architect": "~0.7.2",
    "@angular-devkit/build-angular": "~0.7.2",
    "@angular-devkit/core": "~0.7.2",
    "@angular-devkit/schematics": "~0.7.2",
    "@angular/cli": "6.1.4",
    "@angular/compiler": "~6.1.1",
    "@angular/compiler-cli": "~6.1.1",
    "@angular/language-service": "~6.1.1",
    "@ionic/lab": "1.0.8",
    "@ionic/ng-toolkit": "^1.0.0",
    "@ionic/schematics-angular": "^1.0.0",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~10.7.1",
    "args": "^5.0.0",
    "codelyzer": "~4.4.2",
    "fancy-log": "^1.3.2",
    "gulp": "^4.0.0",
    "gulp-copy": "^1.1.0",
    "gulp-rename": "^1.4.0",
    "gulp-string-replace": "^1.1.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.0",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~2.9.2"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-whitelist": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {},
      "cordova-plugin-ionic-keyboard": {},
      "phonegap-plugin-push": {
        "FCM_VERSION": "11.6.2"
      },
      "cordova-plugin-statusbar": {},
      "cordova-plugin-calendar": {
        "CALENDAR_USAGE_DESCRIPTION": " "
      }
    },

Any help appreciated.

Use @ionic-native/push/ngx for ionic 4

2 Likes

Thanks, works perfectly now.