Ionic 3中的推送通知错误

时间:2017-07-05 08:33:03

标签: push-notification ionic2 ionic3

我正在尝试在Ionic 3应用程序中配置推送通知。我已经配置了Ionic Cloud和Firebase。但我得到一个错误说:

无法在浏览器和设备中解析Push:(?,?)的所有参数。

这是我的app.module.ts文件。

import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { CloudSettings, CloudModule } from '@ionic/cloud-angular';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { PushPageModule } from '../pages/push/push.module';


const cloudSettings: CloudSettings = {
  'core': {
    'app_id': 'fe5f8133'
  },
  'push': {
    'sender_id': '77303616548',
    'pluginConfig': {
      'ios': {
        'badge': true,
        'sound': true
      },
      'android': {
        'iconColor': '#343434'
      }
    }
  }
};

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    HttpModule,
    PushPageModule,
    CloudModule.forRoot(cloudSettings),
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

这是我的app.component.ts

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { HomePage } from '../pages/home/home';

import {
  Push,
  PushToken
} from '@ionic/cloud-angular';

@Component({
  templateUrl: 'app.html',
  providers: [Push]
})
export class MyApp {
  rootPage:any = HomePage;
  logs;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, private push: Push) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();

      this.push.register().then((t: PushToken) => {
        return this.push.saveToken(t);
      }).then((t: PushToken) => {
        console.log('Token saved:', t.token);
        this.logs = 'Token saved:', t.token;
      });

      this.push.rx.notification()
      .subscribe((msg) => {
        console.log('I received awesome push: ' + msg);
        this.logs = 'I received awesome push: ' + msg;
      });

    });
  }
}

这是错误讯息:

enter image description here

1 个答案:

答案 0 :(得分:0)

您不应将Push设置为组件或AppModule中的提供程序。这将在cloud-angular模块中设置。

卸下:

@Component({
  templateUrl: 'app.html',
  // providers: [Push] -> remove this
})
export class MyApp {

检查ionic-cloud-angular的代码here

设置CloudModule.forRoot(config)时,他们已将Push设置为提供商。此外,Push还需要两个参数PushOptionsPushDependencies,这些参数在依赖项注入中缺失。

@NgModule()
    export class CloudModule {
      static forRoot(settings: CloudSettings): ModuleWithProviders {
        return {
          ngModule: CloudModule,
          providers: [
            { provide: CloudSettingsToken, useValue: settings },
            { provide: DIContainer, useFactory: provideContainer, deps: [ CloudSettingsToken ] },
            { provide: Auth, useFactory: provideAuth, deps: [ DIContainer ] },
            { provide: Client, useFactory: provideClient, deps: [ DIContainer ] },
            { provide: Config, useFactory: provideConfig, deps: [ DIContainer ] },
            { provide: Deploy, useFactory: provideDeploy, deps: [ DIContainer ] },
            { provide: Push, useFactory: providePush, deps: [ DIContainer ] },
            { provide: User, useFactory: provideUser, deps: [ DIContainer ] },
            { provide: FacebookAuth, useFactory: provideFacebookAuth, deps: [ DIContainer ]},
            { provide: GoogleAuth, useFactory: provideGoogleAuth, deps: [ DIContainer ]}
          ]
        };
      }