I have been attempting to utilize Firebase as a database for my angular application.
Following the guidance provided in these instructions (located on the official developers Github page), I first installed
npm install angularfire2 firebase --saveSubsequently, I included Firebase in the environment configurations like so:
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"
}
};
Following this, I attempted to import the AngularFireModule and AngularFirestoreModule into the app.module.ts file in the following manner:
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 {}
Moreover, I made adjustments to app.component.ts as follows:
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();
}
}
Everything seemed to be functioning without any errors in the CLI console:
However, upon testing it in the browser, an error message appeared rendering the application non-functional.
The versions of Angular that I am using are:
Any assistance would be greatly appreciated!
PS: It would be very kind if you could display these images upfront as I lack sufficient reputation!!