When trying to connect a firebase database with angularjs I get this error
ERROR in node_modules/angularfire2/firebase.app.module.d.ts(2,10): error TS2305: Module '"F:/inventario/node_modules/firebase/app/index"' has no exported member 'app'.
node_modules/angularfire2/firebase.app.module.d.ts(2,15): error TS2305: Module '"F:/inventario/node_modules/firebase/app/index"' has no exported member 'auth'.
node_modules/angularfire2/firebase.app.module.d.ts(2,21): error TS2305: Module '"F:/inventario/node_modules/firebase/app/index"' has no exported member 'database'.
node_modules/angularfire2/firebase.app.module.d.ts(2,31): error TS2305: Module '"F:/inventario/node_modules/firebase/app/index"' has no exported member 'firestore'.
node_modules/angularfire2/firebase.app.module.d.ts(2,42): error TS2305: Module '"F:/inventario/node_modules/firebase/app/index"' has no exported member 'functions'.
node_modules/angularfire2/firebase.app.module.d.ts(2,53): error TS2305: Module '"F:/inventario/node_modules/firebase/app/index"' has no exported member 'messaging'.
node_modules/angularfire2/firebase.app.module.d.ts(2,64): error TS2305: Module '"F:/inventario/node_modules/firebase/app/index"' has no exported member 'storage'.
node_modules/angularfire2/firestore/firestore.d.ts(3,10): error TS2305: Module '"F:/inventario/node_modules/firebase/app/index"' has no exported member 'firestore'.
node_modules/angularfire2/firestore/interfaces.d.ts(2,10): error TS2305: Module '"F:/inventario/node_modules/firebase/app/index"' has no exported member 'firestore'.
this is what I have in environments/environment.ts
export const environment = {
production: false,
firebase: {
apiKey: "AIzaSyAtlSxhbhUIrAPzV9Uzg8LtE9Sl-9KVd1g",
authDomain: "testing-1575a.firebaseapp.com",
databaseURL: "https://testing-1575a.firebaseio.com",
projectId: "testing-1575a",
storageBucket: "testing-1575a.appspot.com",
messagingSenderId: "929737689620"
}
};
the app.module
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularFireModule } from "angularfire2";
import { AngularFirestoreModule } from 'angularfire2/firestore'
import { environment } from "../environments/environment";
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AngularFirestoreModule,
AngularFireModule,
AngularFireModule.initializeApp(environment.firebase)
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
the component.ts
import { Component, OnInit } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection, AngularFirestoreDocument } from "angularfire2/firestore";
import { Observable } from "rxjs/observable";
import 'rxjs/add/operator/map'
interface Note {
content: String,
hearts: Number,
id?: String
}
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
notesCollection: AngularFirestoreCollection<Note>;
notes: Observable<Note[]>;
constructor(private afs: AngularFirestore) {
}
ngOnInit() {
this.notesCollection = this.afs.collection('notes');
this.notes = this.notesCollection.valueChanges();
}
}
and finally the component.html
<div *ngFor='let note of notes | async' >
<h3> {{note | json}} </h3>
</div>