Using AngularFire2 with Angular 11.0.5

Question

I'm trying to use Firebase as a database for my angular app.

According to this instruction (which is on the official developers Github page), First, I installed npm install angularfire2 firebase --save on my project.

Then I added firebase to the environment like this:

export const environment = {
  production: false,
  firebase: {
    apiKey: "AIzaSyAsxljRPGVlI8qhEAWX4SpnGP-ozNH-USQ",
    authDomain: "ng-ft-fd861.firebaseapp.com",
    projectId: "ng-ft-fd861",
    storageBucket: "ng-ft-fd861.appspot.com",
    messagingSenderId: "185324334847",
    appId: "1:185324334847:web:c8252e76b35e457458e6ca",
    measurementId: "G-RBHLRX57NN"
  }
};

After that, I tried to import the AngularFireModule and AngularFirestoreModule into the app.module.ts file like this:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { WoodComponent } from './wood/wood.component';

import { AngularFireModule } from 'angularfire2';
import { AngularFirestoreModule } from 'angularfire2/firestore';
import { environment } from '../environments/environment';

@NgModule({
  declarations: [AppComponent, WoodComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AngularFirestoreModule,
    AngularFireModule.initializeApp(environment.firebase),
    
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

And after that, I edited app.component.ts like this:

import { Component } from '@angular/core';
import { AngularFirestore } from 'angularfire2/firestore';
import { Observable } from 'rxjs/Observable';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'fire';
  items: Observable<any[]>;
  constructor(db: AngularFirestore) {
    this.items = db.collection('items').valueChanges();
  }
}

I expect it should work. it does not show any error in the CLI console:

Click to see the image

But in the Browser, this error comes up, and the app not been work at all.

Click to see the image

---

My Angular versions are:

Click to see the image

ANY HELPPP?

PS: I'll be thankful if you could make these images show initially. I have not enough reputation!!

Answer 1

According to this instruction (which is on the official developers Github page)

It's a fork of the project (at stated into the first upper part of the link). Always make sure you are on the original project: https://github.com/angular/angularfire

As indicated there, initialize your project using: ng add @angular/fire .

I advice you to remove all previously added content related to firebase and to run this command. It'll not only add firebase dependency but guide you to update your project with firebase.