23

我已经从 RC4 升级到了 Angular2 的最终版本。当我运行npm start时，应用程序卡在“正在加载...”上，我得到的唯一错误是关于 Zone.js：

在此处输入图像描述

基本上，typeof Zone未定义：

在此处输入图像描述

这是我的 package.json：

"engines": {
"node": ">= 4.2.1",
"npm": "3.10.7"
},
"dependencies": {
"@angular/common": "2.0.0",
"@angular/compiler": "2.0.0",
"@angular/core": "2.0.0",
"@angular/forms": "2.0.0",
"@angular/http": "2.0.0",
"@angular/platform-browser": "2.0.0",
"@angular/platform-browser-dynamic": "2.0.0",
"@angular/platform-server": "2.0.0",
"@angular/router": "3.0.0",
"@salesforce-ux/design-system": "^2.0.3",
"angular2-busy": "^0.3.2-rc.6",
"chart.js": "2.1.0",
"core-js": "^2.4.0",
"d3": "^4.2.3",
"lodash": "^4.14.0",
"moment": "^2.14.1",
"ng2-bootstrap": "^1.1.4",
"ng2-charts": "^1.1.0",
"ng2-datepicker": "^1.0.6",
"ng2-pagination": "^0.4.1",
"normalize.css": "^4.1.1",
"rxjs": "5.0.0-beta.12",
"typescript": "2.1.0-dev.20160916",
"zone.js": "0.6.21"
},
"devDependencies": {
"@angular/compiler-cli": "^0.6.1",
"@types/core-js": "^0.9.28",
"@types/hammerjs": "^2.0.28",
"@types/jasmine": "^2.2.29",
"@types/lodash": "^4.14.34",
"@types/node": "^6.0.38",
"@types/source-map": "^0.1.26",
"@types/webpack": "^1.12.29",
"angular2-hmr": "~0.6.0",
"awesome-typescript-loader": "~0.17.0",
"compression-webpack-plugin": "^0.3.1",
"copy-webpack-plugin": "^2.1.3",
"css-loader": "^0.23.1",
"es6-promise": "^3.1.2",
"es6-promise-loader": "^1.0.1",
"es6-shim": "^0.35.0",
"es7-reflect-metadata": "^1.6.0",
"exports-loader": "^0.6.3",
"expose-loader": "^0.7.1",
"file-loader": "^0.8.5",
"html-webpack-plugin": "^2.15.0",
"http-server": "^0.9.0",
"imports-loader": "^0.6.5",
"jasmine": "^2.4.1",
"json-loader": "^0.5.4",
"object-assign": "4.0.1",
"phantomjs-polyfill": "0.0.1",
"raw-loader": "0.5.1",
"source-map-loader": "^0.1.5",
"style-loader": "^0.13.1",
"ts-helpers": "1.1.1",
"ts-node": "^0.7.1",
"tslint": "^3.7.1",
"tslint-loader": "^2.1.3",
"typescript": "2.0.0",
"url-loader": "^0.5.7",
"wallaby-webpack": "0.0.11",
"webpack": "^1.13.0",
"webpack-dev-server": "^1.14.1",
"webpack-md5-hash": "^0.0.5",
"webpack-merge": "^0.12.0"
  }
}

我已经尝试过 zone.js ^0.6.23 以及这些软件包版本。有任何想法吗？我可以编辑和添加更多信息。

编辑：我在 CHANGELOG 中发现的唯一线索是来自 RC 6：

测试配置：由于 zone.js 对等依赖升级，加载各种区域规范的顺序发生了变化。请参阅此示例 Karma 配置。

编辑：我尝试在脚本标签中导入 Zone.js，index.html即使我在 node_modules 中有包，我也会收到这些错误： 在此处输入图像描述

4

5 回答 5

31

如果脚本的顺序不正确，就会发生这种情况。

<!-- ERROR: Angular requires Zone.js polyfill -->
<script src="main.js"></script>
<script src="runtime.js"></script>
<script src="polyfills.js"></script>

正确的顺序：

<!-- Success -->
<script src="runtime.js"></script>
<script src="polyfills.js"></script>
<script src="main.js"></script>
于 2018-06-27T22:24:31.860 回答
19

如果添加node_module到您的 HTML 中存在问题，您只需zone.js在引导之前手动导入即可。

import 'zone.js';
...
platformBrowserDynamic().bootstrapModule(AppModule);
于 2018-05-24T16:58:48.490 回答
13

在包含 Angular 之前，您需要将 Zone 作为脚本标签包含在内，它不会作为模块加载。见 https://angular.io/guide/quickstart

<!-- 1. Load libraries -->

<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
于 2016-09-20T11:43:11.277 回答
7

import 'zone.js'在文件顶部添加main.ts.

我试图包括 serviceWorkers。

于 2018-10-31T19:55:59.673 回答
0

当恢复提交或更改大量文件而不重新启动开发服务器时，也会发生此错误。只需停止 angular cli 服务器，然后再次尝试运行 ng serve。这个解决方案对我有用，起初重启 Angular 开发服务器并不明显。

于 2020-08-05T14:30:53.130 回答