尝试编译 Angular 10 项目时，Firebase 没有导出成员错误答案

【问题标题】：No exported member error with firebase when trying to compile angular 10 project尝试编译 Angular 10 项目时，Firebase 没有导出成员错误
【发布时间】：2021-02-10 19:18:34
【问题描述】：

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

npm install firebase @angular/fire --save

安装firebase。添加 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/ 中的教程进行操作，但我仍然遇到相同类型的错误

【问题讨论】：

标签： angular firebase

【解决方案1】：

该错误与 firebase 的版本有关。您的 firebase 可能高于版本 8。

peer firebase@"^7.0 || ^8.0" from @angular/fire@6.1.5

@angular/fire 要求 firebase 为 7.0 或 8.0。

运行npm uninstall firebase，然后运行npm i firebase@8.0。这对我有用。

【讨论】：

【解决方案2】：

对于任何新来的人遵循角火快速入门指南 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

【讨论】：

【解决方案3】：

import firebase from 'firebase/app';

这对我有用。

【讨论】：

【解决方案4】：

我也有类似的问题。

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

npm i firebase@7.24.0
ng serve

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

【讨论】：

【解决方案5】：

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

请参阅我的单独答案/建议的解决方案here。

【讨论】：

【解决方案6】：

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

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

【讨论】：

嗨@Rolo 感谢您的回复。让我再看一遍试试
嗨@Rolo ....找到了问题。我使用 firebase@7.24.0 来解决问题。谢谢
这个问题已在 angularfire 6.0.4 中得到解决。只需更新到最新版本。
谢谢，这是一个 goog 解决方案。事实上，我使用了 Marc 的解决方案并且工作正常（目前）