Ionic集成Firebase/AngularFire2时遇Zone Already Loaded运行时错误

嘿，这个Zone重复加载的问题我之前在集成AngularFire2的时候也踩过坑，大概率是依赖重复引入或者版本冲突导致的，给你几个实用的排查和解决方向：

1. 排查重复的zone.js依赖 #

首先检查你的项目依赖里是不是存在多个版本的zone.js，或者它被重复安装了：

• 执行命令查看依赖树：

  npm ls zone.js
  

  如果输出里显示多个版本的zone.js，说明有重复依赖。
• 先尝试用npm自带的去重命令：

  npm dedupe
  

  如果还是不行，就手动删除旧依赖文件后重新安装：

  rm -rf node_modules package-lock.json
  npm install
  

2. 检查代码中的重复导入 #

Zone.js在Ionic/Angular项目中通常会自动在polyfills.ts里导入：

import 'zone.js/dist/zone'; // Included with Angular CLI.

你需要检查项目中其他文件（比如app.module.ts或者Firebase相关配置文件）是不是又重复导入了zone.js，如果有，直接删掉那行重复的代码即可。

3. 确认AngularFire2与项目版本兼容 #

现在AngularFire2已经升级为@angular/fire，如果你用的是旧版AngularFire2，可能会和你的Ionic/Angular版本不匹配，进而导致依赖冲突：

• 先确认你的Angular版本，再安装对应版本的依赖：

  npm install firebase @angular/fire --save
  

  安装前可以对照自己项目package.json里的Angular版本，选择适配的@angular/fire版本。

4. 清理构建缓存 #

有时候旧的构建缓存也会导致这种奇怪的加载问题，执行以下命令彻底清理后重新构建：

ionic cordova clean
ionic serve --no-cache

错误原因补充 #

这个错误的本质是zone.js被加载了两次，Zone是Angular处理异步操作的核心库，重复加载会导致内部状态冲突，所以核心解决思路就是找到所有重复引入zone.js的地方，将其去除即可。

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