Angular 7：ng serve 工作，但控制台显示 Zone.js 错误并且应用程序不会加载

Posted 2023-02-22

【中文标题】Angular 7：ng serve 工作，但控制台显示 Zone.js 错误并且应用程序不会加载

【英文标题】：Angular 7: ng serve works, but console shows a Zone.js error and app won't load

【发布时间】：2019-04-18 22:34:45

【问题描述】：

背景故事：昨天我需要将我的应用从 Angular 5.2.9 更新到 6，所以我想“为什么不去 7，而我正在这样做呢？”所以当然这需要一整天，并且需要对大量文件进行大量更改（主要是因为 Rxjs），但无论如何，到一天结束时，我能够做到 ng serve 并让它编译没有错误！

但是当我去localhost:4200 运行该应用程序时，它在“正在加载...”处停止，并在 DevTools 控制台中显示以下消息：

core.js:14016 Uncaught (in promise) Error: In this configuration Angular requires Zone.js
    at new NgZone (core.js:14016)
    at getNgZone (core.js:14701)
    at PlatformRef.push../node_modules/@angular/core/fesm5/core.js.PlatformRef.bootstrapModuleFactory (core.js:14599)
    at core.js:14643

我已尝试确保我的所有软件包都是最新的。 npm install 给出了一些关于 fsevents 的错误，但 zone 是最新的。

所以我现在不知道该怎么办。我不知道错误消息真正想告诉我什么，或者它是否合法。我做了ng new 并检查了生成的文件，那里没有“zone.js setup”代码，所以我没有错过类似的东西。我觉得我已经快要完成这个更新了，但当然，如果应用程序无法运行，那就不好了！ 谷歌搜索此错误消息并没有发现任何有用的信息（无论如何对我来说）。

【问题讨论】：

您先生是个天才！它在我的polyfills.js 文件中被注释掉了。我不知道为什么在 7 而不是 5 中需要这样做。如果你想回答这个问题，我会把它标记为正确的！

与问题无关，但对于 rxjs 的更改，您使用的是 rxjs-compat 包吗？我认为这有助于使您不必为了使用最新的角度而更新所有 rxjs 使用情况

【参考方案1】：

将 package.json 中的每个依赖项更新为最新的

npm i -g npm-check-updates
ncu -u
npm install

即使您收到此错误，错误也会消失。转到polyfill.ts 并添加或取消注释：-

/****************************************************************************
 * Zone JS is required by default for Angular itself. */
import 'zone.js/dist/zone';  // Included with Angular CLI.


/**********************************************************************

【讨论】：

我签入了我 ng new'd 的项目，这行已被注释掉，但示例应用程序工作正常。知道为什么 zone.js 会在 polyfills 文件中，而不是在 angular.json 中吗？

你甚至可以将它添加到 index.html 作为

在生产模式下注释掉，因为抛出错误会影响性能

这可能在某些时候有效，但今天这会将您的应用程序升级到版本 11

【参考方案2】：

我的应用程序也发生了同样的事情，但是在不同的上下文中，我在 django 应用程序中添加了 angular 构建文件，包含的脚本标签顺序不合适，所以在运行“python manage.py runserver”时，浏览器抛出类似“In this configuration Angular requires Zone.js”的错误。所以在尝试以下修复后它得到了修复：

首先应该是顺序

runtime.js polyfills.js main.js

由于 Angular 生成 es5 和 es2015 构建文件，es5 构建文件的脚本标签必须包含 'nomodule defer' 作为属性，而 es2015 包含 'type="text/javascript"'。下面的屏幕截图来自我的 Django 应用程序的“index.html”，我在其中添加了角度构建文件。