离子 3 中的“运行时错误区域已加载”

Posted 2023-02-23

【中文标题】离子 3 中的“运行时错误区域已加载”

【英文标题】："Runtime Error Zone already loaded" in ionic 3

【发布时间】：2018-10-09 22:08:13

【问题描述】：

我正在使用 ionic 3 和 Firebase 身份验证在 Firebase 版本 4.13.1 上开发我的项目。我安装了 Angularfire2。在使用 ionic-lab 测试我的应用程序时，我创建了一个注册表单并成功地将用户详细信息放入了 firebase 数据库。然而，当我关闭并重新打开我的项目时，问题出现了，我收到以下错误：

...node_modules/angularfire2/firebase.app.module.d.ts (10,22) 中的错误：“FirebaseApp”类错误地实现了“FirebaseApp”类。您的意思是扩展“FirebaseApp”并将其成员作为子类继承吗？ “FirebaseApp”类型中缺少属性“automaticDataCollectionEnabled”。

我通过将这一行 automaticDataCollectionEnabled: boolean; 添加到这个类中解决了上述错误 export declare class FirebaseApp implements _FirebaseApp

现在我无法运行我的应用程序，因为它现在给了我一个新错误：

运行时错误 区域已加载。

堆栈

Error: Zone already loaded.
    at http://localhost:8100/build/vendor.js:117594:15
    at http://localhost:8100/build/vendor.js:118206:3
    at FUNCTION (http://localhost:8100/build/vendor.js:117571:10)
    at Object.<anonymous> (http://localhost:8100/build/vendor.js:117574:2)
    at Object.<anonymous> (http://localhost:8100/build/vendor.js:120624:30)
    at __webpack_require__ (http://localhost:8100/build/vendor.js:55:30)
    at Object.defineProperty.value (http://localhost:8100/build/vendor.js:69092:66)
    at __webpack_require__ (http://localhost:8100/build/vendor.js:55:30)
    at Object.<anonymous> (http://localhost:8100/build/vendor.js:117089:72)
    at __webpack_require__ (http://localhost:8100/build/vendor.js:55:30)

我想我可能会加载模块两次，所以我尝试删除： <script src="build/vendor.js"></script> 来自 index.html 并得到一个新的运行时错误：webpack Jsonp is not defined. 所以我把脚本放回去了。

我现在卡住了，非常感谢任何帮助。

【参考方案1】：

这是新firebase更新的问题，这里是这个错误的解决方案

** 步骤：1** 使用此命令安装较低版本的 firebase

npm install angularfire2@5.0.0-rc.4

** 步骤：2**

npm 安装

试试吧。

【参考方案2】：

我通过安装版本 5.0.0-rc.4 而不是 5.0.0-rc.7 来修复它，因为 5.0.0-rc.4 之后的所有内容似乎都会导致“区域已加载”

 npm install angularfire2@5.0.0-rc.4

【讨论】：

我也必须这样做npm install firebase@^4.5.0

【参考方案3】：

就做吧

npm install @firebase/app@latest --save

和

npm install firebase angularfire2 --save

所以一切都是最新的。所以你现在可能会再次遇到这个错误：

node_modules/angularfire2/firebase.app.module.d.ts (10,22)：“FirebaseApp”类错误地实现了“FirebaseApp”类。您的意思是扩展“FirebaseApp”并将其成员作为子类继承吗？ “FirebaseApp”类型中缺少属性“automaticDataCollectionEnabled”

要修复它，请将 "automaticDataCollectionEnabled: boolean;" 行添加到 node_modules\angularfire2\firebase.app.module.d.ts

export declare class FirebaseApp implements FBApp 
    name: string;
    automaticDataCollectionEnabled: boolean; // add this line
    options: ;
    auth: () => FirebaseAuth;
    database: () => FirebaseDatabase;
    messaging: () => FirebaseMessaging;
    storage: () => FirebaseStorage;
    delete: () => Promise;
    firestore: () => FirebaseFirestore;

所以现在应该修复它。如果不是，您必须尝试我的第二个解决方案：

npm i -S @firebase/app

然后进入你的 package.json 文件并将你的依赖项中这两行的版本号更新为以下内容：

"angularfire2": "5.0.0-rc.3",
"firebase": "4.6.0",

全新安装后：

npm install

然后再次发球，它应该会再次工作：

ionic serve