search

andrehtissot / cordova-plugin-fcm-with-dependecy-updated

Google FCM Push Notifications Cordova Plugin
MIT License
210 stars 279 forks source link

TypeError: Cannot read property 'requestPushPermission' of undefined #123

Closed andrehtissot closed 4 years ago

andrehtissot commented 4 years ago

Hey guys, I'm having this problem as well.

I'm using the setup() method like @andrehtissot and the imports like @elkhalifte. But the error is that firebase service is undefined.

const permission = await this.firebase.requestPushPermission()
TypeError: Cannot read property 'requestPushPermission' of undefined

Originally posted by @tiagotrigger in https://github.com/andrehtissot/cordova-plugin-fcm-with-dependecy-updated/issues/113#issuecomment-656883810

andrehtissot commented 4 years ago

Hi @tiagotrigger, I do recommend that you check one of the example apps for context (https://github.com/andrehtissot/cordova-plugin-fcm-with-dependecy-updated#example-apps)

By the error message, what I can identify is that either:

andrehtissot commented 4 years ago

Let me know if you need something else, @tiagotrigger.

tiagotrigger commented 4 years ago

Thank you for your reply. Unfortunately, I can't find the problem. I don't know if it can be a conflict with another package or something else. The code is running after platform ready. I tried all the 3 imports, but none of them works. I'm using ionic 5 just like elkhalifte, he said that the import { FCM } from 'cordova-plugin-fcm-with-dependecy-updated/ionic/ngx' worked for him, but for me gives the undefined error.

andrehtissot commented 4 years ago

Would you share the runtime application log? Having the console logs and their order, like @piyushysoft presented for https://github.com/andrehtissot/cordova-plugin-fcm-with-dependecy-updated/issues/122, would help me to have a clear picture.

tiagotrigger commented 4 years ago

Sorry, I should've done that from the start. Here is the log:

Ionic Native: deviceready event fired after 0 ms
/vendor-es2015.js:214794 Ionic Native: deviceready event fired after 0 ms
/main-es2015.js:1423 APP COMPONENT CONSTRUCTOR
/vendor-es2015.js:95915 Angular is running in the development mode. Call enableProdMode() to enable the production mode.
/main-es2015.js:1430 DONE this.platform.ready()
/main-es2015.js:5249 FCM SETUP INIT
/main-es2015.js:5253 IN CORDOVA
/vendor-es2015.js:71573 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'requestPushPermission' of undefined
TypeError: Cannot read property 'requestPushPermission' of undefined
    at FCM.push../node_modules/cordova-plugin-fcm-with-dependecy-updated/ionic/FCM.js.FCMPluginOnIonic.requestPushPermission (/vendor-es2015.js:170986)
    at NativeFirebaseMessagingService.<anonymous> (/main-es2015.js:5254)
    at Generator.next (<anonymous>)
    at /polyfills-es2015.js:3201
    at new ZoneAwarePromise (/polyfills-es2015.js:4232)
    at Module.__awaiter (/polyfills-es2015.js:3197)
    at NativeFirebaseMessagingService.init (/main-es2015.js:5248)
    at /main-es2015.js:1431
    at ZoneDelegate.invoke (/polyfills-es2015.js:3715)
    at Object.onInvoke (/vendor-es2015.js:96664)
    at resolvePromise (/polyfills-es2015.js:4153)
    at new ZoneAwarePromise (/polyfills-es2015.js:4235)
    at Module.__awaiter (/polyfills-es2015.js:3197)
    at NativeFirebaseMessagingService.init (/main-es2015.js:5248)
    at /main-es2015.js:1431
    at ZoneDelegate.invoke (/polyfills-es2015.js:3715)
    at Object.onInvoke (/vendor-es2015.js:96664)
    at ZoneDelegate.invoke (/polyfills-es2015.js:3714)
    at Zone.run (/polyfills-es2015.js:3480)
    at /polyfills-es2015.js:4211
defaultErrorLogger @ /vendor-es2015.js:71573

image

The version is: "cordova-plugin-fcm-with-dependecy-updated": "^7.0.3",

Apparently is fetching "/ionic" and not "/ionic/ngx", but I'm using the "import {FCM} from 'cordova-plugin-fcm-with-dependecy-updated/ionic/ngx';"

I use in my service like this:

import {FCM} from 'cordova-plugin-fcm-with-dependecy-updated/ionic/ngx';

@Injectable()
export class NativeFirebaseMessagingService {
  constructor(
    private platform: Platform,
    private fcm: FCM,
  ) {  }
  ...

And I use in app.module.ts as a provider:

import {FCM} from "cordova-plugin-fcm-with-dependecy-updated/ionic/ngx";

@NgModule({
  ...
  providers: [
    FCM,
  ...

And I tried to use import {FCM} from "cordova-plugin-fcm-with-dependecy-updated/ionic/ngx/FCM"; pointed in #122 @Stephane84 comment.

But same error and not "/ngx" at the error.

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'requestPushPermission' of undefined
TypeError: Cannot read property 'requestPushPermission' of undefined
    at FCM.push../node_modules/cordova-plugin-fcm-with-dependecy-updated/ionic/FCM.js.FCMPluginOnIonic.requestPushPermission (/vendor-es2015.js:170986)
    at NativeFirebaseMessagingService.<anonymous> (/main-es2015.js:5254)
    at Generator.next (<anonymous>)
Stephane84 commented 4 years ago

Are you testing an emulator or a device ? i had this error one time, in my browser, because fcm is only available with platform cordova, so, you need to call this.fcm.xxx like this, to avoid fcm call happening in browser :

this.platform.ready().then(() => {
    if (this.platform.is("cordova")) {
        this.fcm.requestPushPermission();
    }
});
tiagotrigger commented 4 years ago

Testing on a device. I used the console.log "IN CORDOVA" to be sure.

andrehtissot commented 4 years ago

There seems to be an issue with the current build of .../ionic/ngx, triggered specifically for your environment. I believe fix wouldn't be too difficult and should be available in these next few days

andrehtissot commented 4 years ago

Thanks @tiagotrigger for posting the image, it really helped.

andrehtissot commented 4 years ago

I've made some changes to the exported "FCM", of which should be easier to build with.

@tiagotrigger, would you try the new 7.0.4 version?

tiagotrigger commented 4 years ago

I'm getting an error when building my project. Using Angular 8 and Typescript 3.4.5.

C:\c2\mb\notification-test>ionic cordova run android
[INFO] Hardware device(s) found for android. Using --device.
> ng.cmd run app:ionic-cordova-build --platform=android
Browserslist: caniuse-lite is outdated. Please run the following command: `npm update`

ERROR in node_modules/cordova-plugin-fcm-with-dependecy-updated/ionic/ngx/FCM.d.ts:2:13 - error TS1005: '=' expected.

2 import type { IChannelConfiguration } from '../../www/IChannelConfiguration';
              ~
node_modules/cordova-plugin-fcm-with-dependecy-updated/ionic/ngx/FCM.d.ts:2:44 - error TS1005: ';' expected.

2 import type { IChannelConfiguration } from '../../www/IChannelConfiguration';
                                             ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/cordova-plugin-fcm-with-dependecy-updated/ionic/ngx/FCM.d.ts:3:13 - error TS1005: '=' expected.

3 import type { INotificationPayload } from '../../www/INotificationPayload';
              ~
node_modules/cordova-plugin-fcm-with-dependecy-updated/ionic/ngx/FCM.d.ts:3:43 - error TS1005: ';' expected.

3 import type { INotificationPayload } from '../../www/INotificationPayload';
                                            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/cordova-plugin-fcm-with-dependecy-updated/ionic/ngx/FCM.d.ts:4:13 - error TS1005: '=' expected.

4 import type { IRequestPushPermissionOptions } from '../../www/IRequestPushPermissionOptions';
              ~
node_modules/cordova-plugin-fcm-with-dependecy-updated/ionic/ngx/FCM.d.ts:4:52 - error TS1005: ';' expected.

4 import type { IRequestPushPermissionOptions } from '../../www/IRequestPushPermissionOptions';
                                                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

[ERROR] An error occurred while running subprocess ng.

        ng.cmd run app:ionic-cordova-build --platform=android exited with exit code 1.

        Re-running this command with the --verbose flag may provide more information.
andrehtissot commented 4 years ago

Thank you for mentioning. The fix will be published in the next few hours.

andrehtissot commented 4 years ago

@tiagotrigger @Tristansmiller The fix for .../ionic/ngx/FCM.d.ts is now available as v7.0.6.

tiagotrigger commented 4 years ago

The build worked and the import is correct. But I'm still getting the "Cannot read property X of undefined". image

andrehtissot commented 4 years ago

@tiagotrigger

That's very trange... Would you share your package.json? I'll create an example app an test it locally.

tiagotrigger commented 4 years ago

Sure here it is.

{
  "name": "myapp",
  "version": "1.0.4",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "resolutions": {
    "@babel/preset-env": "7.5.5"
  },
  "dependencies": {
    "@angular/animations": "^8.2.14",
    "@angular/cdk": "^7.3.7",
    "@angular/common": "~8.1.2",
    "@angular/core": "~8.1.2",
    "@angular/forms": "~8.1.2",
    "@angular/material": "~7.3.7",
    "@angular/platform-browser": "~8.1.2",
    "@angular/platform-browser-dynamic": "~8.1.2",
    "@angular/pwa": "^0.901.9",
    "@angular/router": "~8.1.2",
    "@angular/service-worker": "~8.1.2",
    "@code-square/stamper-models": "^1.0.81",
    "@code-square/ts-utils": "^1.0.10",
    "@fortawesome/angular-fontawesome": "^0.6.1",
    "@fortawesome/fontawesome-svg-core": "^1.2.28",
    "@fortawesome/free-brands-svg-icons": "^5.13.0",
    "@fortawesome/free-solid-svg-icons": "^5.13.0",
    "@ionic-native/core": "^5.0.0",
    "@ionic-native/device": "^5.27.0",
    "@ionic-native/fcm": "^5.27.0",
    "@ionic-native/geolocation": "^5.26.0",
    "@ionic-native/splash-screen": "^5.0.0",
    "@ionic-native/status-bar": "^5.0.0",
    "@ionic/angular": "^4.7.1",
    "@ionic/storage": "^2.2.0",
    "@ngx-share/button": "~7.1.4",
    "angular-validate-br": "0.1.0-beta",
    "cordova-android": "7.1.4",
    "cordova-ios": "5.1.1",
    "cordova-plugin-fcm-with-dependecy-updated": "^7.0.6",
    "cordova-plugin-geolocation": "^4.0.2",
    "core-js": "^2.5.4",
    "ngx-google-analytics": "^8.0.0",
    "ngx-mask": "^8.1.7",
    "ngx-mask-ionic": "^1.1.2",
    "ngx-sharebuttons": "~8.0.0",
    "ngx-social-share": "^1.0.0",
    "ngx-spinner": "^9.0.2",
    "rxjs": "~6.5.1",
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/architect": "~0.801.2",
    "@angular-devkit/build-angular": "^0.803.24",
    "@angular-devkit/core": "~8.1.2",
    "@angular-devkit/schematics": "~8.1.2",
    "@angular/cli": "~8.1.2",
    "@angular/compiler": "~8.1.2",
    "@angular/compiler-cli": "~8.1.2",
    "@angular/language-service": "~8.1.2",
    "@babel/compat-data": "~7.8.0",
    "@ionic/angular-toolkit": "^2.1.1",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "^5.0.0",
    "cordova-plugin-device": "^2.0.3",
    "cordova-plugin-ionic-keyboard": "^2.2.0",
    "cordova-plugin-ionic-webview": "^4.2.1",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-statusbar": "^2.4.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "pwa-asset-generator": "^3.1.1",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "tslint-eslint-rules": "~5.4.0",
    "typescript": "~3.4.3"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-whitelist": {},
      "cordova-plugin-geolocation": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {
        "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
      },
      "cordova-plugin-ionic-keyboard": {},
      "cordova-plugin-fcm-with-dependecy-updated": {}
    },
    "platforms": [
      "ios",
      "android"
    ]
  }
}
joel-daros commented 4 years ago

Same issue here. It simple don't works in Ionic 5 in any way.

andrehtissot commented 4 years ago

Yes, it looks like it's not installed at all, at least not as a cordova plugin.

Would you run ionic cordova plugin?

tiagotrigger commented 4 years ago

Weird, it is showing the fcm plugin.

C:\c2\my-app> ionic cordova plugin
> cordova.cmd plugin ls
cordova-plugin-device 2.0.2 "Device"
cordova-plugin-fcm-with-dependecy-updated 7.0.6 "Cordova FCM Push Plugin"
cordova-plugin-geolocation 4.0.2 "Geolocation"
cordova-plugin-ionic-keyboard 2.2.0 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 4.2.1 "cordova-plugin-ionic-webview"
cordova-plugin-splashscreen 5.0.2 "Splashscreen"
cordova-plugin-statusbar 2.4.2 "StatusBar"
cordova-plugin-whitelist 1.3.3 "Whitelist"
andrehtissot commented 4 years ago

This is very concerning. As it is expected to have the main js file injected automatically. Which would be visible by the "FCM: has been created" log message.

If anyone can create an example app that I can debug, I'd appreciate. If not I'll create an example app in the next few days.

tiagotrigger commented 4 years ago

I created this repository: https://github.com/tiagotrigger/example-ionic5-cordova-plugin-fcm-updated

andrehtissot commented 4 years ago

@tiagotrigger Apparently it had nothing to do with the ionic/js part, as I got it fixed by making these changes: https://github.com/tiagotrigger/example-ionic5-cordova-plugin-fcm-updated/compare/master...andrehtissot:master#diff-b9cfc7f2cdf78a7f4b91a753d10865a2

tiagotrigger commented 4 years ago

Thank you very much @andrehtissot it is working now. And sorry for the trouble.

A summary of what was changed:

andrehtissot commented 4 years ago

It was a very strange issue. But if you can keep it up-to-date with newer versions of cordova-android, you lower the risks of facing issues on newer devices.

metalvarez commented 4 years ago

I'm facing the same issue here, here is my package.json. You don't have actual examples with ionic 4, as you can see in my package.json I'm using Ionic v4, and by the way I'm not sure what version is best fit for me v4 or ngx ? 

{
  "name": "example",

  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --proxy-config proxy.config.json",
    "build": "ng build --proxy-config proxy.config.json",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular-devkit/build-angular": "^0.803.24",
    "@angular/common": "^8.2.14",
    "@angular/core": "^8.2.14",
    "@angular/fire": "^5.1.3",
    "@angular/forms": "^8.2.14",
    "@angular/http": "^7.2.2",
    "@angular/platform-browser": "^8.2.14",
    "@angular/platform-browser-dynamic": "^8.2.14",
    "@angular/pwa": "^0.12.4",
    "@angular/router": "^8.2.14",
    "@angular/service-worker": "^8.2.14",
    "@angular/youtube-player": "^8.2.3",
    "@ionic-native/core": "^5.0.0",
    "@ionic-native/file": "^5.26.0",
    "@ionic-native/file-transfer": "^5.26.0",
    "@ionic-native/ionic-webview": "^5.26.0",
    "@ionic-native/splash-screen": "^5.0.0",
    "@ionic-native/status-bar": "^5.0.0",
    "@ionic-native/youtube-video-player": "^5.27.0",
    "@ionic/angular": "^4.7.1",
    "@ionic/storage": "^2.2.0",
    "cordova-android": "^9.0.0",
    "cordova-browser": "5.0.4",
    "cordova-plugin-androidx": "^2.0.0",
    "cordova-plugin-androidx-adapter": "^1.1.1",
    "cordova-plugin-device": "2.0.2",
    "cordova-plugin-fcm-with-dependecy-updated": "^7.1.1",
    "cordova-plugin-file": "^6.0.2",
    "cordova-plugin-file-transfer": "^1.7.1",
    "cordova-plugin-ionic-keyboard": "^2.0.5",
    "cordova-plugin-ionic-webview": "^5.0.0",
    "cordova-plugin-splashscreen": "^5.0.4",
    "cordova-plugin-statusbar": "^2.4.3",
    "cordova-plugin-whitelist": "1.3.3",
    "cordova-plugin-youtube-video-player": "^2.4.0",
    "cordova-res": "^0.9.0",
    "core-js": "^2.5.4",
    "firebase": "^6.6.2",
    "ionic-image-loader": "^7.0.0-beta.2",
    "moment": "^2.25.3",
    "ng-lazyload-image": "^8.0.1",
    "paulstelzer-ionic-angular-toolkit": "^2.0.0",
    "rxjs": "~6.5.1",
    "tslib": "^1.9.0",
    "videogular2": "^7.0.1",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/architect": "^0.900.2",
    "@angular-devkit/core": "^9.0.2",
    "@angular-devkit/schematics": "^9.0.2",
    "@angular/cli": "~8.3.21",
    "@angular/compiler": "~8.2.14",
    "@angular/compiler-cli": "^8.2.14",
    "@angular/language-service": "~8.2.14",
    "@chrisben/imgcache.js": "git+https://github.com/chrisben/imgcache.js.git#2.0.0",
    "@ionic/angular-toolkit": "^2.0.0",
    "@types/core-js": "^2.5.2",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~12.0.0",
    "codelyzer": "~4.5.0",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-ionic-keyboard": "^2.2.0",
    "cordova-plugin-whitelist": "^1.3.3",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~8.1.0",
    "tslint": "~5.16.0",
    "typescript": "~3.5.3"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-whitelist": {},
      "cordova-plugin-device": {},
      "cordova-plugin-ionic-keyboard": {},
      "cordova-plugin-file": {},
      "cordova-plugin-file-transfer": {},
      "cordova-plugin-ionic-webview": {
        "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
      },
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-youtube-video-player": {},
      "cordova-plugin-fcm-with-dependecy-updated": {
        "ANDROID_GRADLE_TOOLS_VERSION": "4.0.0",
        "ANDROID_FCM_VERSION": "19.0.0",
        "ANDROID_GOOGLE_SERVICES_VERSION": "4.3.3",
        "ANDROID_DEFAULT_NOTIFICATION_ICON": "@mipmap/ic_launcher"
      },
      "cordova-plugin-androidx-adapter": {},
      "cordova-plugin-androidx": {}
    },
    "platforms": [
      "browser",
      "android"
    ]
   }
}
andrehtissot commented 4 years ago

@metalvarez I would recommend to try v4 first:

import { FCM } from "cordova-plugin-fcm-with-dependecy-updated/ionic/v4";