我试图将Angular2快速启动代码合并到我当前的webpack构建中，似乎有些东西覆盖了导致此错误的zone.js承诺。根据我见过的大多数stackoverflow帖子，zone.js文件需要在任何可能包含promises的文件之后加载。
我假设发生的事情是在webpack加载剩余的<src>文件之前，加载了带有zone.js文件的node_module标记的html。
有任何想法或建议吗？
这是我正在使用的package.json。
{
"name": "site-pinger",
"version": "1.0.0",
"description": "",
"scripts": {
"build:watch": "webpack --colors --progress --watch",
"build": "webpack --colors --progress",
"start": "webpack-dev-server --progress --colors --hot --inline --port 3000"
},
"author": "",
"license": "ISC",
"standard": {
"parser": "babel-eslint"
},
"babel": {
"presets": [
"latest",
"stage-0"
]
},
"devDependencies": {
"@types/jasmine": "2.5.36",
"@types/node": "^6.0.46",
"babel-core": "^6.17.0",
"babel-eslint": "^7.0.0",
"babel-loader": "^6.2.5",
"babel-polyfill": "^6.16.0",
"babel-preset-latest": "^6.16.0",
"babel-preset-stage-0": "^6.16.0",
"canonical-path": "0.0.2",
"concurrently": "^3.2.0",
"extract-text-webpack-plugin": "^2.1.0",
"file-loader": "^0.9.0",
"html-loader": "^0.4.5",
"html-webpack-plugin": "^2.28.0",
"jasmine-core": "~2.4.1",
"json-loader": "^0.5.4",
"karma": "^1.3.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-jasmine-html-reporter": "^0.2.2",
"lodash": "^4.16.4",
"protractor": "~4.0.14",
"rimraf": "^2.5.4",
"standard": "^8.4.0",
"style-loader": "^0.13.2",
"ts-loader": "^2.0.1",
"tslint": "^3.15.1",
"typescript": "~2.0.10",
"url-loader": "^0.5.8",
"webpack": "^2.1.0",
"webpack-dev-server": "^2.4.1"
},
"dependencies": {
"@angular/common": "~2.4.0",
"@angular/compiler": "~2.4.0",
"@angular/core": "~2.4.0",
"@angular/forms": "~2.4.0",
"@angular/http": "~2.4.0",
"@angular/platform-browser": "~2.4.0",
"@angular/platform-browser-dynamic": "~2.4.0",
"@angular/router": "~3.4.0",
"angular-in-memory-web-api": "~0.2.4",
"systemjs": "0.19.40",
"core-js": "^2.4.1",
"rxjs": "5.0.1",
"zone.js": "^0.7.4"
},
"repository": {}
}
这是webpack.config.js文件
'use strict'
const webpack = require('webpack')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const devtool = 'source-map'
const devServer = {
historyApiFallback: true
}
const entry = {
main: [
'babel-polyfill',
'./src/main'
],
}
const output = {
filename: '[name].js',
path: __dirname + '/dist',
publicPath: '/'
}
const extensions = [
'.js',
'.ts',
'.css',
'.html'
]
const modules = [
'node_modules',
'lib'
]
const rules = [{
test: /.ts$/,
exclude: /node_modules/,
loaders: ['ts-loader']
}, {
test: /.js$/,
exclude: /node_modules/,
loaders: ['babel-loader']
}, {
test: /.css$/,
loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' })
}, {
test: /.html$/,
exclude: /node_modules/,
include: /static/,
loader: 'html-loader'
}, {
test: /.(ico|png|eot|svg|ttf|woff|woff2)$/,
loader: 'url?limit=10000'
}]
const plugins = [
new ExtractTextPlugin('[name].css'),
new HtmlWebpackPlugin({
hash: true,
inject: 'head',
template: 'static/index.html'
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: Infinity
})
]
module.exports = {
devtool,
devServer,
entry,
output,
resolve: {
extensions,
modules
},
module: {
rules
},
plugins
}
这是我的index.html，我手动包含了zone.js文件，以确保他们的Promise不会被覆盖。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Site Pinger</title>
<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/systemjs/dist/system.src.js"></script>
<script src="../src/systemjs.config.js"></script>
</head>
<body>
<app>Loading AppComponent content here ...</app>
</body>
</html>
答案 0 :(得分：2)
当我通过运行 npm install zone.js@latest --save 将 zone.js 包更新到最新版本时，它对我有用。
答案 1 :(得分：1)
加载core-js和zone.js时出现类似错误。
对我来说，诀窍是在zone.js之后将core-js导入。
改变了这个：
import 'zone.js/dist/zone';
import 'core-js';
到此：
import 'core-js';
import 'zone.js/dist/zone';
回到你的webpack问题，正如@estus所说，没有必要在那里放systemjs导入，因为它将包含在webpack生成的dist/*文件中（缺少在你的index.html）。
我的index.html＆＃34; webpacking＆＃34;我的项目看起来像：
<html>
<head>
<!-- only some css links here -->
</head>
<body>
<my-app>
</my-app>
<script src="dist/vendor.bundle.min.js"></script>
<script src="dist/app.bundle.min.js"></script>
</body>
</html>
希望它有所帮助。
答案 2 :(得分：1)
有同样的问题。有 import 'zone.js/dist/zone';在 polyfill.ts 中。我将其移至 main.ts 并解决了我的问题
答案 3 :(得分：0)
答案 4 :(得分：0)
SebraGra的答案是正确的。但是，如果您是在尝试在asp.net网站中运行Angular的情况下来到这里（在我的案例中是4.5.2版），则在app-root标记之后呈现脚本时，错误会消失。 您还需要在dist文件夹中专门定位es2015或es5输出
我还没有找到动态切换它的方法
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title></title>
<base href="/">
</head>
<body>
<app-root></app-root>
@Scripts.Render("~/Scripts/App-es5")
</body>
</html>
public class AngularBundleConfig
{
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/Scripts/App-es2015")
.Include(
"~/App/dist/App/scripts-es2015*",
"~/App/dist/App/vendor-es2015*",
"~/App/dist/App/polyfills-es2015*",
"~/App/dist/App/runtime-es2015*",
"~/App/dist/App/main-es2015*"
));
bundles.Add(new ScriptBundle("~/Scripts/App-es5")
.Include(
"~/App/dist/App/scripts-es5*",
"~/App/dist/App/vendor-es5*",
"~/App/dist/App/polyfills-es5*",
"~/App/dist/App/runtime-es5*",
"~/App/dist/App/main-es5*"
));
}
}
更新
我找到了一种方法，可以通过替换脚本标签来动态切换它们，这意味着您可以同时定位这两个目标：
@Scripts.RenderFormat("<script type=\"module\" src=\"{0}\"></script>", "~/Scripts/App-es2015")
@Scripts.RenderFormat("<script src=\"{0}\" nomodule defer></script>", "~/Scripts/App-es5")