在 VScode 中找不到 @angular/fire/firestore 模块错误

Question

我对 Firebase Firestore 非常陌生。 这是我第一个使用 Firestore 的项目。 我用这个命令安装了 angular fire

npm install firebase @angular/fire --save

现在像这样导入 angularfiremodule

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

还有这样的angularfirestoremodule

import { AngularFirestoreModule } from '@angular/fire/firestore';

但这给了我错误

找不到模块'@angular/fire'.ts(2307)

知道可能是什么错误吗？ 我尝试了谷歌搜索，但由于我是 firebase 新手，所以对我来说一切似乎都很复杂。 另外，我使用的是 ionic 版本 4、Angular 版本 8.1.3 和 node 版本 10.16.3，如果这有什么不同的话。

Angularfire2 之前工作正常，但由于它已被弃用，我想转向 angular/fire。

Answer 1

这里有一些版本不匹配的问题。

为了完成这项工作，您可能需要执行以下操作。

免责声明：我将使用 StackBlitz 进行演示。

要遵循的步骤：

1. 导航到@angular/fire GitHub README 的Quick Links section 中提到的StackBlitz Template 链接。

2. 尝试在AppModule 中导入AngularFirestoreModule 并将其添加到导入array。

   import { AngularFirestoreModule } from '@angular/fire/firestore';
   

3. 转到您的 AppComponent 并导入 AngularFirestore 并将其作为依赖项注入：

   import { Component } from '@angular/core';
   import { Observable } from 'rxjs';
   import { AngularFirestore } from '@angular/fire/firestore';
   
   @Component({
     selector: 'my-app',
     templateUrl: './app.component.html',
     styleUrls: [ './app.component.css' ]
   })
   export class AppComponent  {
     items: Observable<any[]>;
     constructor(db: AngularFirestore) {
       this.items = db.collection('items').valueChanges();
     }
   }
   

4. 你会得到一个错误提示：

   ERROR 错误：app.firestore 不是函数

5. 您希望通过 Google 搜索找到问题的原因和可能的解决方法。您可能最终会使用this GitHub thread，这会建议您重新安装依赖项。

6. 由于我们在 StackBlitz 上，您只需在 DEPENDENCIES 部分中按 “将所有部门更新为最新” 按钮。一旦你这样做，你就会开始收到一条错误消息：

   找不到包：core-js

7. 这显然是 StackBlitz 的一个已知问题。为了修复它，您将再次进行 Google 搜索，并且可能最终会找到 this GitHub thread。

8. 按照线程中的建议，您将通过将 core-js@2 添加到 DEPENDENCIES 字段并按 Enter 来安装它。这将安装 core-js 的 2.6.11 版。

9. 现在你会收到一条错误消息：

   找不到包：@firebase/app

   要修复它，您只需点击显示 “INSTALL PACKAGE @firebase/app”的蓝色按钮

10. 最后，你会得到一个错误提示：

    错误错误："projectId" 未在 firebase.initializeApp 中提供。

    要解决此问题，只需粘贴您的 firebase 配置即可。

希望在完成所有这些步骤之后，您应该能够看到项目更新为@angular/fire。

这是一个Working Demo till Step 9，可以节省您的一些时间。

希望这会有所帮助:)

Answer 2

我的问题通过使用这样的导入解决了，我在下面提到了 firebase 版本 9 和 firestore 7 以及 angular 12。

根据官方文件

Documentation

从此链接获得参考： https://dev.to/jdgamble555/angular-12-with-firebase-9-49a0

官方参考请查看：
https://firebase.google.com/docs/firestore/quickstart

使用安装firestore

ng 添加@angular/fire

使用安装firebase

npm install firebase

import { NgModule } from '@angular/core';        
import { BrowserModule } from '@angular/platform-browser';        
import { AppRoutingModule } from './app-routing.module';        
import { AppComponent } from './app.component';        
import { provideFirebaseApp, initializeApp } from '@angular/fire/app';        
import { getAuth, provideAuth } from '@angular/fire/auth';        
import { getFirestore, provideFirestore } from '@angular/fire/firestore';        
import { getStorage, provideStorage } from '@angular/fire/storage';        
import { getAnalytics, provideAnalytics } from '@angular/fire/analytics';        

import { environment } from '../environments/environment';               

@NgModule({
  declarations: [        
    AppComponent,        
    DashboardComponent,       
    ForgotPasswordComponent,        
    SignInComponent,      
    SignUpComponent,  
    VerifyEmailComponent
  ],
  imports: [
    provideFirebaseApp(() => initializeApp(environment.firebaseConfig)),     
    provideFirestore(() => getFirestore()),  
    provideAuth(() => getAuth()),  
    provideStorage(() => getStorage()),  
    provideAnalytics(() => getAnalytics()),  
    BrowserModule,  
    AppRoutingModule  
  ],  
  providers: [],  
  bootstrap: [AppComponent]  
 })    
export class AppModule { }

Answer 3

我在app.module.ts中使用下面的导入语句解决了这个问题

import { AngularFirestoreModule } from '@angular/fire/compat/firestore/';