By Ramsha Khalid


2019-12-13 12:26:21 8 Comments

I am very new to firebase firestore. And this is my first project with firestore. I installed angular fire with this command

npm install firebase @angular/fire --save

and now importing the angularfiremodule like this

import { AngularFireModule } from '@angular/fire';

and angularfirestoremodule like this

import { AngularFirestoreModule } from '@angular/fire/firestore';

But this is giving me error

Cannot find module '@angular/fire'.ts(2307)

Any idea what might be the error? I tried google searching but since I am new to firebase, everything seems very mixed up to me. Also, I'm using ionic version 4, Angular version 8.1.3 and node version 10.16.3 if that makes any difference.

Angularfire2 was working fine previously, but since it's deprecated, I want to move to angular/fire.

1 comments

@SiddAjmera 2019-12-13 13:00:14

There's some version mismatch issue here.

Here's what you might want to do in order to make this work.

DISCLAIMER: I'll be using StackBlitz for Demo Purposes.

Steps to follow:

  1. Navigate to the StackBlitz Template Link mentioned in the Quick Links section of @angular/fire GitHub README.
  2. Try importing AngularFirestoreModule in the AppModule and add it to the imports array.

    import { AngularFirestoreModule } from '@angular/fire/firestore';
    
  3. Go to your AppComponent and import AngularFirestore and inject it as a dependency:

    import { Component } from '@angular/core';
    import { Observable } from 'rxjs';
    import { AngularFirestore } from '@angular/fire/firestore';
    
    @Component({
      selector: 'my-app',
      templateUrl: './app.component.html',
      styleUrls: [ './app.component.css' ]
    })
    export class AppComponent  {
      items: Observable<any[]>;
      constructor(db: AngularFirestore) {
        this.items = db.collection('items').valueChanges();
      }
    }
    
  4. You'll get an error saying:

    ERROR Error: app.firestore is not a function

  5. You would like to do a Google search finding the reason and a probable fix for the issue. You'll probably end up on this GitHub thread which would suggest that you reinstall the dependencies.

  6. Since we are on StackBlitz, you'll just press the "Update all deps to latest" button in the DEPENDENCIES section. As soon as you do that, you'll start getting an error saying:

    Can't find package:core-js

  7. It's apparently a known issue for StackBlitz. In order to fix it, you'll do a Google search again and probably end up on this GitHub thread.

  8. As suggested in the thread, you'll install [email protected] by adding it to the DEPENDENCIES Field and pressing enter. This will install Version 2.6.11 of core-js.

  9. Now you'll get an error saying:

    Can't find package:@firebase/app

    To fix it, you'll just click on the blue button that says "INSTALL PACKAGE @firebase/app"

  10. Finally, you'll get an error saying:

    ERROR Error: "projectId" not provided in firebase.initializeApp.

    To fix this, just paste in your firebase config.

And hopefully, after following all these steps, you should be able to see the project updated to @angular/fire.

Here's a Working Demo till Step 9 to save some of your time.

Hope this helps :)

@Ramsha Khalid 2019-12-13 13:43:26

Umm you gave the demo using StackBlitz, but since I am on VSCode I don't have the buttons to update dependencies etc.

@SiddAjmera 2019-12-13 13:46:14

For that, you might just want to delete your package-lock.json file and re-run npm i

Related Questions

Sponsored Content

11 Answered Questions

[SOLVED] NullInjectorError: No provider for AngularFirestore

2 Answered Questions

[SOLVED] angular error: Cannot find module 'firebase/app'

  • 2019-03-09 05:34:52
  • user2459179
  • 3990 View
  • 1 Score
  • 2 Answer
  • Tags:   angular firebase npm

4 Answered Questions

1 Answered Questions

Upgrade angular app to use @angular/fire 5.1.0

1 Answered Questions

[SOLVED] Angularfire2 compiling issues in Angular 5.2

2 Answered Questions

[SOLVED] Cannot find module '@angular/core'. Cannot find module 'rxjs'

Sponsored Content