前提・実現したいこと
このサイトを参考にして、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
TypeScript
1import { IonicModule } from '@ionic/angular'; 2import { RouterModule } from '@angular/router'; 3import { NgModule } from '@angular/core'; 4import { CommonModule } from '@angular/common'; 5import { FormsModule } from '@angular/forms'; 6import { HomePage } from './home.page'; 7import { FCM } from '@ionic-native/fcm'; 8 9@NgModule({ 10 imports: [ 11 IonicModule, 12 CommonModule, 13 FormsModule, 14 FCM, 15 RouterModule.forChild([{ path: '', component: HomePage }]) 16 ], 17 declarations: [HomePage] 18}) 19export class HomePageModule {}
home.page.ts
TypeScript
1import { Component, OnInit } from '@angular/core'; 2import { HttpClient } from '@angular/common/http'; 3import { Globalization } from '@ionic-native/globalization/ngx'; 4import { LoadingController } from '@ionic/angular'; 5import { Storage } from '@ionic/storage'; 6import { Router } from '@angular/router'; 7import { PushNotificationService } from './../services/push-notification/push-notification.service'; 8 9import { FollowService } from '../services/follow.service'; 10 11 12@Component({ 13 selector: 'app-home', 14 templateUrl: 'home.page.html', 15 styleUrls: ['home.page.scss'] 16}) 17export class HomePage implements OnInit { 18 19 public postData: any; 20 public locale: string; 21 public appAccessToken: string; 22 23 constructor( 24 public http: HttpClient, 25 public loadingContrller: LoadingController, 26 public storage: Storage, 27 public router: Router, 28 public followService: FollowService, 29 private pushNotificationService: PushNotificationService, 30 private globalization: Globalization 31 ) { 32 this.locale = "ja"; 33 this.appAccessToken = "alueoweurlwrow7hrurowurouwjlwjr"; 34 } 35 36 async ngOnInit() { 37 this.pushNotificationService.pushRegister(); 38 this.storage.get('isFirst') 39 .then((t)=>{ 40 t = 'aaaa'; 41 console.log(t); 42 if (t == null) { 43 this.storage.set('isFirst', 'true'); 44 // 端末の言語設定を取得して保存 45 this.globalization.getPreferredLanguage().then((res) => { 46 // 端末の言語設定があるならばローカルに保存 47 if(res.value){ 48 this.storage.set('language', res.value); 49 } 50 }).catch((e) => { 51 alert(e); 52 }) 53 // 端末のロケール情報を取得して保存 54 this.globalization.getLocaleName().then((res) => { 55 // 端末のロケール設定があるならばローカルに保存 56 if(res.value){ 57 this.storage.set('locale', res.value); 58 } 59 }).catch((e) => { 60 alert(e); 61 }) 62 this.router.navigateByUrl('/login'); 63 } 64 }) 65 .catch((err)=>{ 66 67 }); 68 } 69 async ionViewDidEnter() { 70 const loading = await this.loadingContrller.create({ 71 message: 'Loading...' 72 }); 73 await loading.present(); 74 this.followService.postList(this.appAccessToken, this.locale) 75 .subscribe(data => { 76 this.postData = data['postData']; 77 console.log(data); 78 loading.dismiss(); 79 }); 80 } 81}
push-notification.service.ts
TypeScript
1import { Injectable } from '@angular/core'; 2import { ToastController } from '@ionic/angular'; 3import { Device } from '@ionic-native/device/ngx'; 4import { HttpClient } from '@angular/common/http'; 5import { environment } from "@app/environment"; 6import { FCM } from '@ionic-native/fcm'; 7 8@Injectable({ 9 providedIn: 'root' 10}) 11export class PushNotificationService { 12 13 constructor( 14 private toastController: ToastController, 15 private device: Device, 16 private http: HttpClient, 17 private fcm: FCM 18 ) {} 19 20 pushRegister() { 21 console.log('Initializing HomePage'); 22 this.fcm.getToken().then(token => { 23 alert(token); 24 }); 25 } 26}
push-notification.service.ts
TypeScript
1{ 2 "name": "photo-rc1", 3 "version": "0.0.1", 4 "author": "Ionic Framework", 5 "homepage": "http://ionicframework.com/", 6 "scripts": { 7 "ng": "ng", 8 "start": "ng serve", 9 "build": "ng build", 10 "test": "ng test", 11 "lint": "ng lint", 12 "e2e": "ng e2e" 13 }, 14 "config": { 15 "ionic_webpack": "./webpack.config.js" 16 }, 17 "private": true, 18 "dependencies": { 19 "@angular/common": "~8.2.11", 20 "@angular/core": "~8.2.11", 21 "@angular/forms": "~8.2.11", 22 "@angular/http": "~7.2.15", 23 "@angular/platform-browser": "~8.2.11", 24 "@angular/platform-browser-dynamic": "~8.2.11", 25 "@angular/router": "~8.2.11", 26 "@capacitor-community/twitter": "^1.0.1", 27 "@capacitor/android": "^2.2.1", 28 "@capacitor/core": "^2.2.1", 29 "@capacitor/ios": "^2.2.1", 30 "@ionic-native/camera": "^5.15.1", 31 "@ionic-native/core": "^5.15.1", 32 "@ionic-native/device": "^5.27.0", 33 "@ionic-native/facebook": "^5.26.0", 34 "@ionic-native/fcm": "^4.20.0", 35 "@ionic-native/file": "^5.23.0", 36 "@ionic-native/globalization": "^5.27.0", 37 "@ionic-native/google-plus": "^5.22.0-beta-1", 38 "@ionic-native/http": "^5.27.0", 39 "@ionic-native/in-app-browser": "^5.27.0", 40 "@ionic-native/splash-screen": "^5.15.1", 41 "@ionic-native/status-bar": "^5.15.1", 42 "@ionic/angular": "^4.11.1", 43 "@ionic/storage": "^2.2.0", 44 "cordova-android": "^8.1.0", 45 "cordova-ios": "^5.1.1", 46 "cordova-plugin-advanced-http": "^3.0.0", 47 "cordova-plugin-camera": "~4.1.0", 48 "cordova-plugin-compat": "^1.2.0", 49 "cordova-plugin-device": "^2.0.3", 50 "cordova-plugin-facebook4": "^6.4.0", 51 "cordova-plugin-fcm-with-dependecy-updated": "^7.1.1", 52 "cordova-plugin-file": "^6.0.2", 53 "cordova-plugin-globalization": "^1.11.0", 54 "cordova-plugin-googleplus": "^8.5.0", 55 "cordova-plugin-inappbrowser": "^4.0.0", 56 "cordova-plugin-ionic-keyboard": "^2.2.0", 57 "cordova-plugin-ionic-webview": "^4.1.2", 58 "cordova-plugin-splashscreen": "^5.0.3", 59 "cordova-plugin-statusbar": "^2.4.3", 60 "cordova-plugin-whitelist": "^1.3.4", 61 "cordova-sqlite-storage": "^3.4.0", 62 "core-js": "^3.3.2", 63 "firebase": "^7.14.4", 64 "rxjs": "~6.5.3", 65 "rxjs-compat": "^6.6.2", 66 "y": "^0.3.2", 67 "zone.js": "^0.10.2" 68 }, 69 "devDependencies": { 70 "@angular-devkit/architect": "~0.803.12", 71 "@angular-devkit/build-angular": "^0.803.12", 72 "@angular-devkit/core": "~8.3.12", 73 "@angular-devkit/schematics": "~8.3.12", 74 "@angular/cli": "8.3.29", 75 "@angular/compiler": "~8.2.11", 76 "@angular/compiler-cli": "~8.2.11", 77 "@angular/language-service": "~8.2.11", 78 "@capacitor/cli": "^2.2.1", 79 "@ionic/angular-toolkit": "^2.0.0", 80 "@ionic/app-scripts": "^3.2.4", 81 "@types/jasmine": "^3.4.4", 82 "@types/jasminewd2": "^2.0.8", 83 "@types/node": "^12.11.1", 84 "codelyzer": "~5.1.2", 85 "jasmine-core": "~3.5.0", 86 "jasmine-spec-reporter": "~4.2.1", 87 "karma": "~4.4.1", 88 "karma-chrome-launcher": "~3.1.0", 89 "karma-coverage-istanbul-reporter": "^2.1.0", 90 "karma-jasmine": "~2.0.1", 91 "karma-jasmine-html-reporter": "^1.4.2", 92 "protractor": "~5.4.2", 93 "ts-node": "~8.4.1", 94 "tslint": "~5.20.0", 95 "typescript": "~3.4.3" 96 }, 97 "description": "An Ionic project", 98 "cordova": { 99 "plugins": { 100 "cordova-plugin-camera": {}, 101 "cordova-plugin-whitelist": {}, 102 "cordova-plugin-statusbar": {}, 103 "cordova-plugin-device": {}, 104 "cordova-plugin-splashscreen": {}, 105 "cordova-plugin-ionic-webview": { 106 "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+" 107 }, 108 "cordova-plugin-ionic-keyboard": {}, 109 "cordova-sqlite-storage": {}, 110 "cordova-plugin-file": {}, 111 "cordova-plugin-facebook4": { 112 "APP_ID": "579938932630998", 113 "APP_NAME": "kimono-plus" 114 }, 115 "cordova-plugin-googleplus": { 116 "REVERSED_CLIENT_ID": "com.googleusercontent.apps.429272429043-80mt3u9n8sbajji3pg3hbevrpd5m66l3" 117 }, 118 "cordova-plugin-fcm-with-dependecy-updated": {} 119 }, 120 "platforms": [ 121 "ios", 122 "android" 123 ] 124 } 125} 126
試したこと
ここに問題に対して試したことを記載してください。
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/08/21 03:42 編集