Angular2最终版本-“错误:Angular需要Zone.js prolyfill" [英] Angular2 Final Release - "Error: Angular requires Zone.js prolyfill"

问题描述

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

基本上，区域类型是未定义的:

这是我的package.json:

 引擎":{"node":> = 4.2.1"，"npm":"3.10.7"}，依赖关系":{"@ 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-b​​rowser":"2.0.0"，"@ angular/platform-b​​rowser-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"，茉莉花":"^ 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和

解决方案

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

 <！-1.加载库->< 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> 

I have upgraded from RC4 to the Final release of Angular2. When I run npm start, the app is stuck on 'Loading...' the only error I get is about Zone.js:

Basically, typeof Zone is undefined:

Here is my 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"
  }
}

I've tried zone.js ^0.6.23 and these package versions as well. Any ideas? I can edit and add more information.

Edit: The only clue I found in CHANGELOG was this from RC 6:

testing config: due to zone.js peer-dependency upgrade, the order in which various zone specs are loaded has changed. Please see this example Karma config.

Edit: I tried importing Zone.js in script tags in index.html and I get these errors even though I have the packages in node_modules:

解决方案

You need to include Zone as a script tag before you include angular, it doesn't get loaded as a module. See 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>

这篇关于Angular2最终版本-“错误:Angular需要Zone.js prolyfill"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！