Ionic 3 中的推送通知错误

Question

我正在尝试在我的 Ionic 3 应用程序中配置推送通知。我已经配置了 Ionic Cloud 和 Firebase。但我收到一条错误消息：

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

这是我的 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;
      });

    });
  }
}

这是错误信息：

Answer 1

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

删除：

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

检查 ionic-cloud-angular 的代码 here。

当您设置 CloudModule.forRoot(config) 时，他们已经将 Push 设置为提供商。此外，Push 需要两个参数 PushOptions 和 PushDependencies，它们在您的依赖项注入中缺失。

@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 ]}
          ]
        };
      }

Ionic 3 中的推送通知错误

Push Notification Error in Ionic 3

push-notification

ionic2

ionic3