Ionic项目集成AngularFire2时出现模块找不到错误求助

环境信息 #

• 操作系统：Linux Mint 18 Cinnamon 64位
• NPM：5.6.0
• Node：v10.0.0
• Ionic：3.20.0

错误出现场景 #

我正在跟随教程尝试使用AngularFire2在Ionic项目中集成Firebase，完全按照教程操作，直到运行ionic serve时出现错误。

完整错误信息：

typescript: home/brian/node_modules/angularfire2/angularfire2.d.ts, line: 1 Cannot find module '@angular/core'. L1: import { InjectionToken, NgZone } from '@angular/core'; L2: import { Observable, Subscription } from 'rxjs'; 
typescript: home/brian/node_modules/angularfire2/angularfire2.d.ts, line: 2 Cannot find module 'rxjs'. L1: import { InjectionToken, NgZone } from '@angular/core'; L2: import { Observable, Subscription } from 'rxjs'; L3: import { FirebaseOptions, FirebaseAppConfig } from '@firebase/app-types'; 
typescript: home/brian/node_modules/angularfire2/auth/auth.d.ts, line: 3 Cannot find module '@angular/core'. L2: import { FirebaseOptions, FirebaseAppConfig } from '@firebase/app-types'; L3: import { NgZone } from '@angular/core'; L4: import { Observable } from 'rxjs'; 
typescript: home/brian/node_modules/angularfire2/auth/auth.d.ts, line: 4 Cannot find module 'rxjs'. L3: import { NgZone } from '@angular/core'; L4: import { Observable } from 'rxjs'; L5: export declare class AngularFireAuth { 
typescript: home/brian/node_modules/angularfire2/firebase.app.module.d.ts, line: 1 Cannot find module '@angular/core'. L1: import { InjectionToken } from '@angular/core'; L2: import { FirebaseApp as _FirebaseApp, FirebaseOptions, FirebaseAppConfig } from '@firebase/app-types'; 

回溯过程 #

安装AngularFire2时执行了命令：

npm install firebase angularfire2 --save

第一次执行返回的警告信息显示AngularFire2需要多个peer依赖（如@angular/common@^5.0.0、@angular/core@^5.0.0、rxjs@^5.5.4等）但未安装；再次执行时，AngularFire2版本升级到了5.0.0-rc.8.0，依赖要求变成了@angular/common@^6.0.0等更高版本，同样提示缺少peer依赖。

我的package.json位于/home/brian目录，内容如下：

{ 
  "name": "bin", 
  "version": "1.0.0", 
  "main": "index.js", 
  "scripts": { 
    "test": "echo \"Error: no test specified\" && ex

问题根源分析 #

从你的npm警告和编译错误能一眼看出核心问题：你装的AngularFire2版本和Ionic 3项目依赖的Angular版本完全不匹配，而且所有必要的peer依赖包都没装。

Ionic 3对应的是Angular 5.x版本，但第二次安装时自动拉取的AngularFire2 5.0.0-rc.8.0要求Angular 6.x；第一次的rc.7版本虽然适配Angular 5.x，但你也没补全它需要的依赖，导致编译时找不到@angular/core、rxjs这些核心模块。

解决方案步骤 #

1. 先卸载不兼容的版本
   把当前的AngularFire2和Firebase全部移除：

   npm uninstall firebase angularfire2 --save
   

2. 安装和Ionic 3兼容的指定版本
   Ionic 3要搭配AngularFire2 5.0.0-rc.7（适配Angular 5.x），同时选兼容性最好的firebase@4.13.1：

   npm install firebase@4.13.1 angularfire2@5.0.0-rc.7 --save
   

3. 补全所有缺失的peer依赖
   根据之前的警告信息，安装AngularFire2 rc.7要求的所有依赖：

   npm install @angular/common@^5.0.0 @angular/core@^5.0.0 @angular/platform-browser@^5.0.0 @angular/platform-browser-dynamic@^5.0.0 rxjs@^5.5.4 zone.js@^0.8.0 --save
   

4. 清理缓存并重新构建项目
   避免缓存残留导致奇怪问题，执行以下命令：

   npm cache clean --force
   rm -rf node_modules
   npm install
   ionic serve
   

额外提醒 #

你的package.json内容看起来不完整，建议检查并补全Ionic项目所需的脚本和配置——比如Ionic 3项目通常会有ionic:build、ionic:serve这类核心脚本，缺少的话可能会影响后续运行。另外以后装依赖时，遇到peer依赖警告一定要及时处理，要么装对应版本，要么指定兼容的依赖包版本，别忽略这些提示。

内容的提问来源于stack exchange，提问作者Brian Ivander T. P.