質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.94%

ionic で @ionic-native/fcmパッケージを使用すると、実機デバッグ時に画面が真っ白で停止する

受付中

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 904

score 1

前提・実現したいこと

このサイトを参考にして、FCMをつかってpush通知を実装したかったのですが
Androidの実機デバッグで、Android Studioのビルドまでエラーがなく進みました。
実機でアプリが立ち上がると、画面が真っ白のまま進みません。
Chromeのコンソールにつないでエラーを確認したところ下記のエラーが出ました。

■■な機能を実装中に以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

ERROR Error: Uncaught (in promise): TypeError: Object(...) is not a function
TypeError: Object(...) is not a function
at /home-home-module.js:186
at Module../node_modules/@ionic-native/fcm/index.js (/home-home-module.js:268)
at webpack_require (runtime.js:85)
at Module../src/app/services/push-notification/push-notification.service.ts (/home-home-module.js:564)
at webpack_require (runtime.js:85)
at Module../src/app/home/home.page.ts (/home-home-module.js:388)
at webpack_require (runtime.js:85)
at Module../src/app/home/home.module.ts (/home-home-module.js:319)
at webpack_require (runtime.js:85)
at main.js:548
at resolvePromise (polyfills.js:3846)
at resolvePromise (polyfills.js:3805)
at polyfills.js:3907
at ZoneDelegate.invokeTask (polyfills.js:3441)
at Object.onInvokeTask (vendor.js:64367)
at ZoneDelegate.invokeTask (polyfills.js:3440)
at Zone.runTask (polyfills.js:3208)
at drainMicroTaskQueue (polyfills.js:3621)

該当のソースコード

home.module.ts

import { IonicModule } from '@ionic/angular';
import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { HomePage } from './home.page';
import { FCM } from '@ionic-native/fcm';

@NgModule({
  imports: [
    IonicModule,
    CommonModule,
    FormsModule,
    FCM,
    RouterModule.forChild([{ path: '', component: HomePage }])
  ],
  declarations: [HomePage]
})
export class HomePageModule {}

home.page.ts

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Globalization } from '@ionic-native/globalization/ngx';
import { LoadingController } from '@ionic/angular';
import { Storage } from '@ionic/storage';
import { Router } from '@angular/router';
import { PushNotificationService } from './../services/push-notification/push-notification.service';

import { FollowService } from '../services/follow.service';


@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss']
})
export class HomePage  implements OnInit {

  public postData: any;
  public locale: string;
  public appAccessToken: string;

  constructor(
    public http: HttpClient,
    public loadingContrller: LoadingController,
    public storage: Storage,
    public router: Router,
    public followService: FollowService,
    private pushNotificationService: PushNotificationService,
    private globalization: Globalization
  ) {
    this.locale = "ja";
    this.appAccessToken = "alueoweurlwrow7hrurowurouwjlwjr";
  }

  async ngOnInit() {
    this.pushNotificationService.pushRegister();
    this.storage.get('isFirst')
      .then((t)=>{
        t = 'aaaa';
        console.log(t);
        if (t == null) {
          this.storage.set('isFirst', 'true');
          // 端末の言語設定を取得して保存
          this.globalization.getPreferredLanguage().then((res) => {
            // 端末の言語設定があるならばローカルに保存
            if(res.value){
              this.storage.set('language', res.value);
            }
          }).catch((e) => {
            alert(e);
          })
          // 端末のロケール情報を取得して保存
          this.globalization.getLocaleName().then((res) => {
            // 端末のロケール設定があるならばローカルに保存
            if(res.value){
              this.storage.set('locale', res.value);
            }
          }).catch((e) => {
            alert(e);
          })
          this.router.navigateByUrl('/login');
        }
      })
      .catch((err)=>{

      });
  }
  async ionViewDidEnter() {
    const loading = await this.loadingContrller.create({
      message: 'Loading...'
    });
    await loading.present();
    this.followService.postList(this.appAccessToken, this.locale)
    .subscribe(data => {
      this.postData = data['postData'];
      console.log(data);
      loading.dismiss();
    });
  }
}

push-notification.service.ts

import { Injectable } from '@angular/core';
import { ToastController } from '@ionic/angular';
import { Device } from '@ionic-native/device/ngx';
import { HttpClient } from '@angular/common/http';
import { environment } from "@app/environment";
import { FCM } from '@ionic-native/fcm';

@Injectable({
  providedIn: 'root'
})
export class  PushNotificationService {

  constructor(
    private toastController: ToastController,
    private device: Device,
    private http: HttpClient,
    private fcm: FCM
  ) {}

  pushRegister() {
    console.log('Initializing HomePage');
    this.fcm.getToken().then(token => {
      alert(token);
    });
  }
}

push-notification.service.ts

{
  "name": "photo-rc1",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "config": {
    "ionic_webpack": "./webpack.config.js"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "~8.2.11",
    "@angular/core": "~8.2.11",
    "@angular/forms": "~8.2.11",
    "@angular/http": "~7.2.15",
    "@angular/platform-browser": "~8.2.11",
    "@angular/platform-browser-dynamic": "~8.2.11",
    "@angular/router": "~8.2.11",
    "@capacitor-community/twitter": "^1.0.1",
    "@capacitor/android": "^2.2.1",
    "@capacitor/core": "^2.2.1",
    "@capacitor/ios": "^2.2.1",
    "@ionic-native/camera": "^5.15.1",
    "@ionic-native/core": "^5.15.1",
    "@ionic-native/device": "^5.27.0",
    "@ionic-native/facebook": "^5.26.0",
    "@ionic-native/fcm": "^4.20.0",
    "@ionic-native/file": "^5.23.0",
    "@ionic-native/globalization": "^5.27.0",
    "@ionic-native/google-plus": "^5.22.0-beta-1",
    "@ionic-native/http": "^5.27.0",
    "@ionic-native/in-app-browser": "^5.27.0",
    "@ionic-native/splash-screen": "^5.15.1",
    "@ionic-native/status-bar": "^5.15.1",
    "@ionic/angular": "^4.11.1",
    "@ionic/storage": "^2.2.0",
    "cordova-android": "^8.1.0",
    "cordova-ios": "^5.1.1",
    "cordova-plugin-advanced-http": "^3.0.0",
    "cordova-plugin-camera": "~4.1.0",
    "cordova-plugin-compat": "^1.2.0",
    "cordova-plugin-device": "^2.0.3",
    "cordova-plugin-facebook4": "^6.4.0",
    "cordova-plugin-fcm-with-dependecy-updated": "^7.1.1",
    "cordova-plugin-file": "^6.0.2",
    "cordova-plugin-globalization": "^1.11.0",
    "cordova-plugin-googleplus": "^8.5.0",
    "cordova-plugin-inappbrowser": "^4.0.0",
    "cordova-plugin-ionic-keyboard": "^2.2.0",
    "cordova-plugin-ionic-webview": "^4.1.2",
    "cordova-plugin-splashscreen": "^5.0.3",
    "cordova-plugin-statusbar": "^2.4.3",
    "cordova-plugin-whitelist": "^1.3.4",
    "cordova-sqlite-storage": "^3.4.0",
    "core-js": "^3.3.2",
    "firebase": "^7.14.4",
    "rxjs": "~6.5.3",
    "rxjs-compat": "^6.6.2",
    "y": "^0.3.2",
    "zone.js": "^0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/architect": "~0.803.12",
    "@angular-devkit/build-angular": "^0.803.12",
    "@angular-devkit/core": "~8.3.12",
    "@angular-devkit/schematics": "~8.3.12",
    "@angular/cli": "8.3.29",
    "@angular/compiler": "~8.2.11",
    "@angular/compiler-cli": "~8.2.11",
    "@angular/language-service": "~8.2.11",
    "@capacitor/cli": "^2.2.1",
    "@ionic/angular-toolkit": "^2.0.0",
    "@ionic/app-scripts": "^3.2.4",
    "@types/jasmine": "^3.4.4",
    "@types/jasminewd2": "^2.0.8",
    "@types/node": "^12.11.1",
    "codelyzer": "~5.1.2",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.4.1",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "^2.1.0",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "protractor": "~5.4.2",
    "ts-node": "~8.4.1",
    "tslint": "~5.20.0",
    "typescript": "~3.4.3"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-camera": {},
      "cordova-plugin-whitelist": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {
        "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
      },
      "cordova-plugin-ionic-keyboard": {},
      "cordova-sqlite-storage": {},
      "cordova-plugin-file": {},
      "cordova-plugin-facebook4": {
        "APP_ID": "579938932630998",
        "APP_NAME": "kimono-plus"
      },
      "cordova-plugin-googleplus": {
        "REVERSED_CLIENT_ID": "com.googleusercontent.apps.429272429043-80mt3u9n8sbajji3pg3hbevrpd5m66l3"
      },
      "cordova-plugin-fcm-with-dependecy-updated": {}
    },
    "platforms": [
      "ios",
      "android"
    ]
  }
}

試したこと

ここに問題に対して試したことを記載してください。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

0

ERROR Error: Uncaught (in promise) なので、JavaScriptのエラーです。

軽くコードみた範囲、例えば home.module.ts の FCM はimportではなくprovidersに入れるはずですし、一度serveの状態でコードを見直した方がいいと思います。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/08/21 12:40 編集

    ご回答ありがとうございました。ご指摘いただいた部分を修正したところ
    エラー文がFCMのプラグインのエラーに代わりましたので、本投稿の内容を経更新しました。ありがとうございました

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.94%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る