【问题标题】:Is it possible to use angularfire2 with Angular 6?是否可以将 angularfire2 与 Angular 6 一起使用?
【发布时间】:2018-04-28 11:29:53
【问题描述】:

我正在尝试向我的 Angular 6 应用程序添加 firebase 支持,但是在添加 angularfire2 时

npm install angularfire2 firebase

我收到很多警告说我必须使用 Angular 5。例如

npm WARN angularfire2@5.0.0-rc.6.0 requires a peer of @angular/core@^5.0.0 but none is installed. You must install peer dependencies yourself.

现在可以在 Angular 6 中使用 angularfire2 吗?

编译时出现此错误:

ERROR in node_modules/angularfire2/angularfire2.d.ts(3,10): error TS2305: Module '"/home/rrr/Projects/ng6test/node_modules/rxjs/Subscription"' has no exported member 'Subscription'.
node_modules/angularfire2/firebase.app.module.d.ts(10,22): error TS2720: Class 'FirebaseApp' incorrectly implements class 'FirebaseApp'. Did you mean to extend 'FirebaseApp' and inherit its members as a subclass?
  Property 'automaticDataCollectionEnabled' is missing in type 'FirebaseApp'.
node_modules/rxjs/Subscription.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/Subscription'.

我尝试安装 rxjs-compat,但之后我收到另一个警告

ERROR in node_modules/angularfire2/firebase.app.module.d.ts(10,22): error TS2720: Class 'FirebaseApp' incorrectly implements class 'FirebaseApp'. Did you mean to extend 'FirebaseApp' and inherit its members as a subclass?
  Property 'automaticDataCollectionEnabled' is missing in type 'FirebaseApp'.

【问题讨论】:

  • 在 github (github.com/angular/angularfire2/issues/1576) 上有一个关于此的已知问题,您想要做的是 npm install firebase@4.12.1
  • 您找到解决方案了吗?如果没有,请尝试将 angularfire2 升级到最新版本:5.0.0-rc.7.2-next - 并将 firebase 升级到 ^4.13.1,并在 v.6 上安装 rxjs-compat .. 我的项目正在使用这些版本和 angular v. 6. 确保检查控制台是否实际安装了这些版本。告诉我
  • @ChrisEenberg 不工作我更新“angularfire2”:“^5.0.0-rc.7.2-next”和“firebase”:“^4.13.1”,“rxjs-compat”: "^6.2.1",仍然给出错误 node_modules/angularfire2/index"' has no export member 'AngularFireModule'

标签: angular firebase angularfire2 angular6


【解决方案1】:

我已经尝试过,但我无法让 Angular 6 与任何版本的 AngularFire2(最新版本:5.0.0-rc.7.2-next)一起工作。我想我们需要等待 AngularFire2 的下一个主要版本。

更新:
临时解决方案是安装rxjs-compat
npm install --save rxjs-compat

【讨论】:

  • rxjs-compat 帮助解决了大部分问题,但我仍然遇到几行错误。您能说出您使用哪个版本的 firebase 和 angularfire2 成功启动了吗?
  • @qUest firebase 4.13.1angualrfire2 5.0.0-rc.7.2-nextfirebase 5.0+ 对我不起作用。
【解决方案2】:

尝试:

npm install firebase angularfire2@next --save

在预发布版本中修复:

angularfire2@next

【讨论】:

    【解决方案3】:

    package.json

    "dependencies": 
    {
    "@angular/animations": "^6.0.3",
    "@angular/cdk": "^6.1.0",
    "@angular/common": "^6.0.3",
    "@angular/compiler": "^6.0.3",
    "@angular/core": "^6.0.3",
    "@angular/forms": "^6.0.3",
    "@angular/http": "^6.0.3",
    "@angular/material": "^6.1.0",
    "@angular/platform-browser": "^6.0.3",
    "@angular/platform-browser-dynamic": "^6.0.3",
    "@angular/router": "^6.0.3",
    "@firebase/app": "^0.3.3",
    "angularfire2": "^5.0.0-rc.10",
    "core-js": "^2.5.6",
    "firebase": "^5.0.3",
    "hammerjs": "^2.0.8",
    "rxjs": "^6.2.0",
    "rxjs-compat": "^6.2.0",
    "zone.js": "^0.8.26"
    }
    

    app.module.ts

    import { AngularFireModule } from 'angularfire2';
    import { AngularFireDatabaseModule } from 'angularfire2/database';
    import { AngularFireAuthModule } from 'angularfire2/auth';
    import { environment } from '../environments/environment';
    

    @ngModule

    @NgModule({
        declarations: [
            AppComponent
        ],
        imports: [
            BrowserModule,
            BrowserAnimationsModule,
            routing,
            FormsModule,
            HttpClientModule,
            AngularFireModule.initializeApp(environment.firebase),
            AngularFireDatabaseModule,
            AngularFireAuthModule
    
        ]
    })
    

    环境

    firebase: {
        apiKey: "apikey",
        authDomain: "authDomain",
        databaseURL: "https://projectId.firebaseio.com",
        projectId: "projectId",
        storageBucket: "projectId.appspot.com",
        messagingSenderId: "messagingSenderId"
      }
    

    【讨论】:

    • 欢迎来到 Stack Overflow!请不要把你的源代码扔在这里。友善一点,并尝试对您的答案进行漂亮的描述,以便其他人会喜欢并支持它。见:How do I write a good answer?
    猜你喜欢
    • 2021-11-02
    • 1970-01-01
    • 1970-01-01
    • 2015-08-21
    • 2017-05-28
    • 2021-11-12
    • 2016-04-01
    • 2011-01-20
    • 2018-08-11
    相关资源
    最近更新 更多