尝试编译 angular 10 项目时，firebase 没有导出成员错误

Question

我安装了一个有角度的仪表板模板，我用 ng serve 对其进行了测试以确认工作正常。然后我跑

npm install firebase @angular/fire --save

安装火力基地。在添加 firebase 项目凭据并编辑 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 {}

尝试编译时出现以下错误。

    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';

但我无法弄清楚错误的原因。我曾尝试查看几个将 firebase 与 angular 集成的在线教程，但我看不出有什么问题

更新

尝试按照https://www.positronx.io/full-angular-7-firebase-authentication-system/ 中的教程逐字逐句，但我仍然遇到相同类型的错误

Answer 1

有一个有效的解决方法，不需要将 firebase 降级（从8.0降级为7.x之前建议的那样）。

请在此处查看我单独的答案/建议的解决方案。

Answer 2

我有类似的问题。

能够通过安装 firebase@7.24.0 来解决它

npm i firebase@7.24.0
ng serve

希望它会有所帮助。谢谢。

Answer 3

对于新来的人请遵循 Angular Fire 快速入门指南 https://github.com/angular/angularfire/blob/master/docs/install-and-setup.md

改变

    import { AngularFireModule } from "@angular/fire";

到

    import { AngularFireModule } from '@angular/fire/compat';

为我工作

您可以按照文档获取更多帮助 https://github.com/angular/angularfire/blob/master/docs/firestore/documents.md

Answer 4

我在使用 Ionic 的 Angular 中遇到了类似的问题，但保存所有文件并再次编译后，问题就消失了。为什么？我不知道，但在其他项目中我也遇到过类似的情况。

尝试更改您正在编辑的每个文件的一些不相关的内容（例如在行之间添加一些空格），并在编译之前保存它们。