Ionic 2 - 没有Push的提供者

时间:2017-04-12 09:20:54

标签: ionic-framework push-notification ionic2

我正在关注本教程:https://medium.com/@ankushaggarwal/push-notifications-in-ionic-2-658461108c59尝试使用Firebase实现推送通知,我认为我做的一切正确但现在当我运行我的应用时出现异常:错误:0:0导致by:没有推送提供商!

任何想法我该如何解决?

有我的app.component.ts和app.module.ts

app.module.ts:

import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
{Only App Pages ...}

@NgModule({
declarations: [
    MyApp,
    {Only App Pages ...}
],
imports: [
    IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
    MyApp,
    {Only App Pages...}
],
providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}

App.component.ts:

import {Component} from "@angular/core";
import {AlertController, Nav, Platform} from "ionic-angular";
import {StatusBar} from "@ionic-native/status-bar";
import {SplashScreen} from "@ionic-native/splash-screen";
import {Push, PushObject, PushOptions} from "@ionic-native/push";
import { HomePage } from '../pages/home/home';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any = HomePage;

  constructor(public platform: Platform, 
                   public statusBar: StatusBar, 
                   public splashScreen: SplashScreen, 
                   public push: Push,
                   public alertCtrl: AlertController) {

    platform.ready().then(() => {
      statusBar.styleDefault();
      splashScreen.hide();
      this.initPushNotification();
    });
  }

  initPushNotification() {
    if (!this.platform.is('cordova')) {
      console.warn("Push notifications not initialized. Cordova is not available - Run in physical device");
      return;
    }
    const options: PushOptions = {
      android: {
        senderID: "883847118563"
      }
    };
    const pushObject: PushObject = this.push.init(options);

    pushObject.on('registration').subscribe((data: any) => {
      console.log("device token ->", data.registrationId);

      let alert = this.alertCtrl.create({
                  title: 'device token',
                  subTitle: data.registrationId,
                  buttons: ['OK']
                });
                alert.present();

    });

    pushObject.on('notification').subscribe((data: any) => {
      console.log('message', data.message);
      //if user using app and push notification comes
      if (data.additionalData.foreground) {
        // if application open, show popup
        let confirmAlert = this.alertCtrl.create({
          title: 'New Notification',
          message: data.message,
          buttons: [{
            text: 'Ignore',
            role: 'cancel'
          }, {
            text: 'View',
            handler: () => {
              //TODO: Your logic here
            //  this.nav.push(DetailsPage, {message: data.message});
            }
          }]
        });
        confirmAlert.present();
      } else {
        //if user NOT using app and push notification comes
        //TODO: Your logic on click of push notification directly
      //  this.nav.push(DetailsPage, {message: data.message})
      let alert = this.alertCtrl.create({
                  title: 'clicked on',
                  subTitle: "you clicked on the notification!",
                 buttons: ['OK']
                });
                alert.present();
        console.log("Push notification clicked");
      }
    });

    pushObject.on('error').subscribe(error => console.error('Error with Push plugin', error));
  }
}

提前感谢您的帮助。

1 个答案:

答案 0 :(得分:21)

您需要在app.module.ts

中将Push设置为提供者
@NgModule({
declarations: [
    MyApp,
    {Only App Pages ...}
],
imports: [
    IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
    MyApp,
    {Only App Pages...}
],
providers: [
    StatusBar,
    SplashScreen,
    Push,//here
    {provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}

在离子本机v3.x中,所有插件都设置为提供程序,并通过在构造函数中注入来使用。