CODEWITHSUNDEEP
firebaseionic-frameworknpmionic3ionic-native
Arvind Chourasiya
Arvind Chourasiya

Reputation: 17422

Firebase import not initializing in constructor ionic native

I am working on ionic fcm push notifications. I have imported

import { Firebase } from '@ionic-native/firebase'; but I not able to initialize Firebase in constructor. This is my code

import { Injectable } from '@angular/core';
import { Firebase } from '@ionic-native/firebase';
import { Platform } from 'ionic-angular';
import {HttpClient, HttpHeaders} from '@angular/common/http';

@Injectable()
export class FcmProvider {

  constructor(private platform: Platform, 
              public firebaseNative:Firebase,
              public http: HttpClient) {
    console.log('Hello FcmProvider Provider');
  }

  // Get permission from the user
  async getToken() {
    let token;

    if (this.platform.is('android')) {
      token = await this.firebaseNative.getToken()
    }      
  }
  }
}

I am getting error at 

constructor(private platform: Platform, 
              public firebaseNative:Firebase,

It is saying

Cannot find name Firebase

I am following this article.

I have installed npm i @ionic-native/firebase and npm i @ionic-native/fcm packages still not getting it. For more information see screenshot :

enter image description here

Update: Please Package.Json

  "private": true,
  "dependencies": {
    "@angular/common": "^7.2.2",
    "@angular/core": "^7.2.2",
    "@angular/forms": "^7.2.2",
    "@angular/http": "^7.2.2",
    "@angular/platform-browser": "^7.2.2",
    "@angular/platform-browser-dynamic": "^7.2.2",
    "@angular/router": "^7.2.2",
    "@ionic-native/core": "^5.0.0",
    "@ionic-native/fcm": "^5.1.0",
    "@ionic-native/firebase": "^5.1.0",
    "@ionic-native/splash-screen": "^5.0.0",
    "@ionic-native/status-bar": "^5.0.0",
    "@ionic/angular": "^4.0.0",
    "angularfire2": "^5.1.1",
    "cordova-plugin-firebase": "2.0.5",
    "core-js": "^2.5.4",
    "firebase": "^5.8.3",
    "ionic-angular": "^3.1.0",
    "nvm-win": "^0.2.4",
    "reinstall": "^2.0.0",
    "rxjs": "~6.3.3",
    "zone.js": "~0.8.29"
  },
}

How can I solve this issue?

Upvotes: 2

Views: 1042

Answers (3)

Rathnakara S
Rathnakara S

Reputation: 1466

The error comes if you have installed the wrong native plugin version for your project type or you are not appending ngx at the end of the import.

Check the project type in ionic.config.json

If the type is "ionic-angular" (generally Ionic 3), then install 4.x.x version.

npm i -s @ionic-native/firebase@4

If the type is "angular" (generally Ionic 4), then install the latest version

npm i -s @ionic-native/firebase

Note:

Add ngx at the end of import only if you are using Angular 6

import { Firebase } from '@ionic-native/firebase/ngx';

if not remove ngx from the import

import { Firebase } from '@ionic-native/firebase'

Refencence:https://github.com/ionic-team/ionic/issues/15225#issuecomment-414074074

Upvotes: 2

Tachyon
Tachyon

Reputation: 2411

Since you're using an Angular version that is greater than Angular 6 you need to include /ngx at the end of the import. I.e. import { Firebase } from '@ionic-native/firebase/ngx';

Upvotes: 2

paras shah
paras shah

Reputation: 889

May be you are using ionic version 3 project and you are using of latest version ionic V4.

first solution

As mentioned in v4 Document use "ngx" at the last of import path

Like:-

import { Firebase } from '@ionic-native/firebase/ngx'; REF : https://ionicframework.com/docs/native/firebase

Second Solution

First remove the existing plugin ionic cordova plugin remove cordova-plugin-firebase

Re add it with

ionic cordova plugin add cordova-plugin-firebase

npm install --save @ionic-native/firebase@4

Remember to follow doc v3 for further implementation

https://ionicframework.com/docs/v3/native/firebase/

Upvotes: 2

Related Questions