No exported member error with firebase when trying to compile angular 10 project

Question

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 https://www.positronx.io/full-angular-7-firebase-authentication-system/ word for word but I am still getting the same type of error

Answer 1

I had a similar issue.

Was able to solve it by installing [email protected]

npm i [email protected]
ng serve

Hope it will help. Thanks.