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

Posted 2023-02-19

【中文标题】在 VScode 中找不到 @angular/fire/firestore 模块错误

【英文标题】：Cannot find @angular/fire/firestore module error in VScode

【发布时间】：2020-04-06 21:46:21

【问题描述】：

我对 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。

【参考方案1】：

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

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

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

要遵循的步骤：

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

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

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

转到您的 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();
  

你会得到一个错误提示：

ERROR 错误：app.firestore 不是函数

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

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

找不到包：core-js

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

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

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

找不到包：@firebase/app

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

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

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

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

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

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

希望这会有所帮助:)

【讨论】：

嗯，您使用 StackBlitz 进行了演示，但是由于我使用的是 VSCode，因此我没有更新依赖项等的按钮。

为此，您可能只想删除您的package-lock.json 文件并重新运行npm i

有更新吗？我正在使用 Angular 的 10 版，但问题仍然存在，出现此错误这可能意味着声明 AngularFirestore 的库（@angular/fire/firestore）没有被 ngcc 正确处理，或者与 Angular Ivy 不兼容。检查是否有更新版本的库可用，如果有则更新。还可以考虑与图书馆的作者核实，看看图书馆是否应该与 Ivy 兼容。

【参考方案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  

【参考方案3】：

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

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