无法找到模块‘@angular/fire’及AngularFirestore导入失败问题求助

你这明显是混用了AngularFire新旧版本的导入路径，加上依赖配置没对齐才导致的报错，我帮你一步步搞定：

1. 先统一AngularFire的依赖版本 #

首先得搞清楚：

• 旧版AngularFire用的包名是angularfire2，导入路径是angularfire2/xxx
• 新版已经改成@angular/fire了，导入路径也要对应成@angular/fire/xxx

你现在代码里同时出现了@angular/fire和angularfire2/firestore，这就导致模块解析冲突了。我推荐直接升级到新版（旧版早就不维护了），步骤如下：

升级到新版@angular/fire #

1. 先把旧的包卸载干净：

npm uninstall angularfire2 firebase

2. 安装新版的包，注意要和你的Angular版本匹配（比如Angular 16配@angular/fire@7.x，Angular 17配@angular/fire@7.6+）：

# 举个例子，Angular 16的话就装这个
npm install @angular/fire firebase@9.x

2. 修正代码里的导入路径 #

先改app.module.ts #

把旧的导入换成新版路径，还要记得在imports里初始化AngularFire：

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

@NgModule ({
  declarations: [
    AppComponent, SignupComponent, LandingComponent, ProfileComponent, NavbarComponent, FooterComponent, LoginComponent, BlogComponent, ForgetpwdComponent, BlogDashboartComponent, BlogDetailsComponent, BlogListComponent
  ],
  imports: [
    BrowserModule, 
    NgbModule.forRoot(), 
    FormsModule, 
    RouterModule, 
    AppRoutingModule, 
    HomeModule, 
    ReactiveFormsModule, 
    HttpModule,
    // 这里替换成你自己从Firebase控制台拿到的配置
    AngularFireModule.initializeApp(yourFirebaseConfig),
    AngularFirestoreModule // 别忘了导入Firestore模块
  ],
  providers: [AngularFirestore ],
  bootstrap: [AppComponent]
})

再改服务文件的导入 #

把服务里的旧导入也换成新版，还有RxJS的操作符导入也要改（新版RxJS不用add的方式了）：

import { Posts } from './posts';
import { Injectable } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/firestore';
// 新版RxJS这么导入map操作符
import { map } from 'rxjs/operators';

之后用的时候要改成.pipe(map(...))的形式，代替原来的.map(...)。

3. 如果不想升级，坚持用旧版angularfire2 #

要是你暂时不想升级，那就要确保所有导入都用旧路径，还要检查依赖：

1. 先装对旧版的包：

npm install angularfire2 firebase@5.x # 旧版angularfire2对应firebase 5.x左右的版本

2. 改app.module.ts的导入：

import { AngularFireModule } from 'angularfire2';
import { AngularFirestoreModule, AngularFirestore } from 'angularfire2/firestore';

@NgModule ({
  // 其他配置不变
  imports: [
    // 其他模块不变
    AngularFireModule.initializeApp(yourFirebaseConfig),
    AngularFirestoreModule
  ],
  // ...
})

服务文件的导入就保持你原来的angularfire2/firestore就行，但要注意RxJS版本的兼容性。

最后再检查这几点 #

• 确认你的Angular版本和AngularFire版本匹配，版本不兼容也会出问题
• 执行npm install确保所有依赖都装好了
• 重启一下Angular的开发服务器（ng serve），有时候缓存会搞事情

内容的提问来源于stack exchange，提问作者Isuru vindula