I installed an angular dashboard template which I tested with ng serve to confirm worked. I then run
npm install firebase @angular/fire --save to install firebase. And after adding firebase project credentials and editing the app.module.ts
import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http'; import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AuthInterceptor, AuthService, FakeBackendInterceptor } from '@services/*'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { ChartsModule } from './pages/charts'; import { ComponentsModule } from './pages/components'; import { DashboardModule } from './pages/dashboard'; import { Dashboard2Module } from './pages/dashboard2'; import { FormsModule } from './pages/forms'; import { AngularFireModule } from "@angular/fire"; import { AngularFireAuthModule } from "@angular/fire/auth"; import { AngularFirestoreModule } from '@angular/fire/firestore'; import { environment } from '../environments/environment'; @NgModule({ declarations: [AppComponent], imports: [ BrowserModule, AppRoutingModule, ComponentsModule, DashboardModule, Dashboard2Module, FormsModule, ChartsModule, HttpClientModule, AngularFireModule.initializeApp(environment.firebase), AngularFireAuthModule, AngularFirestoreModule, ], providers: [ AuthService, { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true, }, { provide: HTTP_INTERCEPTORS, useClass: FakeBackendInterceptor, multi: true, }, ], bootstrap: [AppComponent], }) export class AppModule {} I get the following errors when I try to compile.
ERROR in node_modules/@angular/fire/firebase.app.module.d.ts:2:10 - error TS2614: Module '"../../firebase"' has no exported member 'analytics'. Did you mean to use 'import analytics from "../../firebase"' instead? 2 import { analytics, app, auth, database, firestore, functions, messaging, performance, remoteConfig, storage } from 'firebase/app'; ~~~~~~~~~ node_modules/@angular/fire/firebase.app.module.d.ts:2:21 - error TS2614: Module '"../../firebase"' has no exported member 'app'. Did you mean to use 'import app from "../../firebase"' instead? 2 import { analytics, app, auth, database, firestore, functions, messaging, performance, remoteConfig, storage } from 'firebase/app'; ~~~ node_modules/@angular/fire/firebase.app.module.d.ts:2:26 - error TS2614: Module '"../../firebase"' has no exported member 'auth'. Did you mean to use 'import auth from "../../firebase"' instead? 2 import { analytics, app, auth, database, firestore, functions, messaging, performance, remoteConfig, storage } from 'firebase/app'; ~~~~ node_modules/@angular/fire/firebase.app.module.d.ts:2:32 - error TS2614: Module '"../../firebase"' has no exported member 'database'. Did you mean to use 'import database from "../../firebase"' instead? 2 import { analytics, app, auth, database, firestore, functions, messaging, performance, remoteConfig, storage } from 'firebase/app'; ~~~~~~~~ node_modules/@angular/fire/firebase.app.module.d.ts:2:42 - error TS2614: Module '"../../firebase"' has no exported member 'firestore'. Did you mean to use 'import firestore from "../../firebase"' instead? 2 import { analytics, app, auth, database, firestore, functions, messaging, performance, remoteConfig, storage } from 'firebase/app'; ~~~~~~~~~ node_modules/@angular/fire/firebase.app.module.d.ts:2:53 - error TS2614: Module '"../../firebase"' has no exported member 'functions'. Did you mean to use 'import functions from "../../firebase"' instead? 2 import { analytics, app, auth, database, firestore, functions, messaging, performance, remoteConfig, storage } from 'firebase/app'; ~~~~~~~~~ node_modules/@angular/fire/firebase.app.module.d.ts:2:64 - error TS2614: Module '"../../firebase"' has no exported member 'messaging'. Did you mean to use 'import messaging from "../../firebase"' instead? 2 import { analytics, app, auth, database, firestore, functions, messaging, performance, remoteConfig, storage } from 'firebase/app'; ~~~~~~~~~ node_modules/@angular/fire/firebase.app.module.d.ts:2:75 - error TS2614: Module '"../../firebase"' has no exported member 'performance'. Did you mean to use 'import performance from "../../firebase"' instead? 2 import { analytics, app, auth, database, firestore, functions, messaging, performance, remoteConfig, storage } from 'firebase/app'; ~~~~~~~~~~~ node_modules/@angular/fire/firebase.app.module.d.ts:2:88 - error TS2614: Module '"../../firebase"' has no exported member 'remoteConfig'. Did you mean to use 'import remoteConfig from "../../firebase"' instead? 2 import { analytics, app, auth, database, firestore, functions, messaging, performance, remoteConfig, storage } from 'firebase/app'; ~~~~~~~~~~~~ node_modules/@angular/fire/firebase.app.module.d.ts:2:102 - error TS2614: Module '"../../firebase"' has no exported member 'storage'. Did you mean to use 'import storage from "../../firebase"' instead? 2 import { analytics, app, auth, database, firestore, functions, messaging, performance, remoteConfig, storage } from 'firebase/app'; ~~~~~~~ node_modules/@angular/fire/auth/auth.d.ts:4:10 - error TS2614: Module '"../../../firebase"' has no exported member 'User'. Did you mean to use 'import User from "../../../firebase"' instead? 4 import { User, auth } from 'firebase/app'; ~~~~ node_modules/@angular/fire/auth/auth.d.ts:4:16 - error TS2614: Module '"../../../firebase"' has no exported member 'auth'. Did you mean to use 'import auth from "../../../firebase"' instead? 4 import { User, auth } from 'firebase/app'; ~~~~ node_modules/@angular/fire/auth/auth.d.ts:12:14 - error TS2411: Property 'authState' of type 'Observable<any>' is not assignable to string index type 'Promise<any> & ((...args: unknown[]) => Promise<any>) & ((...args: unknown[]) => any)'. 12 readonly authState: Observable<User | null>; ~~~~~~~~~ node_modules/@angular/fire/auth/auth.d.ts:16:14 - error TS2411: Property 'idToken' of type 'Observable<string>' is not assignable to string index type 'Promise<any> & ((...args: unknown[]) => Promise<any>) & ((...args: unknown[]) => any)'. 16 readonly idToken: Observable<string | null>; ~~~~~~~ node_modules/@angular/fire/auth/auth.d.ts:20:14 - error TS2411: Property 'user' of type 'Observable<any>' is not assignable to string index type 'Promise<any> & ((...args: unknown[]) => Promise<any>) & ((...args: unknown[]) => any)'. 20 readonly user: Observable<User | null>; ~~~~ node_modules/@angular/fire/auth/auth.d.ts:26:14 - error TS2411: Property 'idTokenResult' of type 'Observable<any>' is not assignable to string index type 'Promise<any> & ((...args: unknown[]) => Promise<any>) & ((...args: unknown[]) => any)'. 26 readonly idTokenResult: Observable<auth.IdTokenResult | null>; ~~~~~~~~~~~~~ node_modules/@angular/fire/firestore/interfaces.d.ts:2:10 - error TS2614: Module '"../../../firebase"' has no exported member 'firestore'. Did you mean to use 'import firestore from "../../../firebase"' instead? 2 import { firestore } from 'firebase/app'; ~~~~~~~~~ node_modules/@angular/fire/firestore/collection/collection.d.ts:2:10 - error TS2614: Module '"../../../../firebase"' has no exported member 'firestore'. Did you mean to use 'import firestore from "../../../../firebase"' instead? 2 import { firestore } from 'firebase/app'; ~~~~~~~~~ node_modules/@angular/fire/firestore/document/document.d.ts:5:10 - error TS2614: Module '"../../../../firebase"' has no exported member 'firestore'. Did you mean to use 'import firestore from "../../../../firebase"' instead? 5m import { firestore } from 'firebase/app'; ~~~~~~~~~ node_modules/@angular/fire/firestore/collection-group/collection-group.d.ts:2:10 - error TS2614: Module '"../../../../firebase"' has no exported member 'firestore'. Did you mean to use 'import firestore from "../../../../firebase"' instead? 2 import { firestore } from 'firebase/app'; ~~~~~~~~~ node_modules/@angular/fire/firestore/firestore.d.ts:8:10 - error TS2614: Module '"../../../firebase"' has no exported member 'firestore'. Did you mean to use 'import firestore from "../../../firebase"' instead? 8 import { firestore } from 'firebase/app'; But I cant figure out the cause of the errors. I have tried looking at several online tutorials for integrating firebase with angular but I cant see anything wrong
UPDATE
Attempted following the tutorial in word for word but I am still getting the same type of error
6 Answers
There is a valid workaround that does not require a downgrade of firebase (from 8.0 to 7.x as previously proposed).
Please see my separate answer / proposed solution here.
I had a similar issue.
Was able to solve it by installing firebase@7.24.0
npm i firebase@7.24.0 ng serve Hope it will help. Thanks.
I had a similar problem with Angular using Ionic, but after saving all the files and compiling again, the problem was gone. Why? I don't know, but in other projects I had similar situations.
Try to change something irrelevant (like adding some spaces between the lines) of each file you have been editing and save them before compiling.
4For anyone new here Follow angular fire quick start guide
Changing
import { AngularFireModule } from "@angular/fire"; To
import { AngularFireModule } from '@angular/fire/compat'; Worked for me
you can follow documentation for more help
import firebase from 'firebase/app'; This worked for me.
The error is related to the version of firebase. Your firebase is likely greater than version 8.
peer firebase@"^7.0 || ^8.0" from @angular/fire@6.1.5
@angular/fire requires firebase to be either at 7.0 or 8.0.
Run npm uninstall firebase and then npm i firebase@8.0. That worked for me.
