![](/img/trans.png)
[英]Uncaught ReferenceError: System is not defined at (index) - Angular 2
[英]Angular2 ReferenceError: System is not defined when using webpack
我收到类似于以下内容的错误: Angular2 + webpack Uncaught ReferenceError: System is not defined
...或者
带有 webpack 的 Angular 2 - 未捕获的 ReferenceError:系统未定义
我正在使用最新的 npm package.json 设置:
http://angular.io/docs/ts/latest/guide/npm-packages.html
我没有找到针对此问题的任何解决方案。 我正在使用 ASP.NET 本地 IIS 服务器。 项目从 Visual Studio 社区 2015 开始。
webpack.common.js
:
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var path = require('path');
var ProvidePlugin = require('webpack/lib/ProvidePlugin');
module.exports = {
devtool: 'cheap-module-source-map',
cache: true,
debug: true,
entry: {
'polyfills': './polyfills.ts',
'vendor': './vendor.ts',
'main': './main.ts',
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(true),
new webpack.optimize.CommonsChunkPlugin({
name: ['main', 'vendor', 'polyfills'],
minChunks: Infinity
}),
new ProvidePlugin({
jQuery: 'jquery',
$: 'jquery',
jquery: 'jquery'
})
],
module: {
loaders: [
{ test: /\.ts$/, loaders: ['awesome-typescript-loader', 'angular2-template-loader'] },
{ test: /\.css$/, loaders: ['to-string-loader', 'css-loader'] },
{ test: /\.less$/, loader: 'raw-loader!less-loader' },
{ test: /\.html$/, loader: 'raw-loader' },
{ test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/, loader: 'file?name=assets/[name].[hash].[ext]' }
]
},
output: {
publicPath: '/',
filename: '[name].js',
sourceMapFilename: '[name].map',
chunkFilename: '[id].js'
},
htmlLoader: {
minimize: false
},
devServer: {
contentBase: '.',
host: 'localhost',
potr: 44305
},
resolve: {
extensions: ['', '.ts', '.js', '.css', '.less']
},
node: {
global: 1,
crypto: 'empty',
module: 0,
Buffer: 0,
clearImmediate: 0,
setImmediate: 0
}
};
webpack.config.js
:
var webpack = require('webpack');
var path = require('path');
var webpackMerge = require('webpack-merge');
var commonConfig = require('./webpack.common.js');
// Webpack Config
var webpackConfig = {
output: {
filename: '[name].js'
}
};
module.exports = webpackMerge(commonConfig, webpackConfig);
tsconfig.json:
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"rootDir": ".",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true
},
"exclude": [
"node_modules"
],
"awesomeTypescriptLoaderOptions": {
"useWebpackText": true
},
"compileOnSave": true,
"buildOnSave": false,
"atom": {
"rewriteTsconfig": false
}
}
vendors.ts
:
import '@angular/platform-browser';
import '@angular/platform-browser-dynamic';
import '@angular/core';
import '@angular/common';
import '@angular/http';
import '@angular/router';
import 'rxjs/Rx';
import 'jquery/dist/jquery';
import 'bootstrap/dist/js/bootstrap';
import 'angular2-notifications/components.js';
import 'moment';
import 'eonasdan-bootstrap-datetimepicker/src/js/bootstrap-datetimepicker.js';
polyfills.ts
:
import 'core-js/es6';
import 'core-js/es7/reflect';
require('zone.js/dist/zone');
require('zone.js/dist/long-stack-trace-zone');
Chrome console
:
core.umd.js:3468Error: Uncaught (in promise): ReferenceError: System is not defined
at resolvePromise (https://localhost:44305/polyfills.js:7687:32)
at https://localhost:44305/polyfills.js:7664:14
at ZoneDelegate.invoke (https://localhost:44305/polyfills.js:7461:29)
at Object.onInvoke (https://localhost:44305/vendor.js:6786:42)
at ZoneDelegate.invoke (https://localhost:44305/polyfills.js:7460:35)
at Zone.run (https://localhost:44305/polyfills.js:7354:44)
at https://localhost:44305/polyfills.js:7720:58
at ZoneDelegate.invokeTask (https://localhost:44305/polyfills.js:7494:38)
at Object.onInvokeTask (https://localhost:44305/vendor.js:6777:42)
at ZoneDelegate.invokeTask (https://localhost:44305/polyfills.js:7493:43)
和你一样,我遵循了 Angular 2 指南,我希望我的应用程序能够使用 Webpack 而不是 SystemJS 成功构建和运行。 对,没错! 对我来说,原来是由延迟加载模块引起的。
如果您在任何路由定义中指定“loadChildren”,Angular 2 默认使用 SystemJS 模块加载器来检索模块。 除非您提供另一个加载程序(请参阅https://angular.io/docs/ts/latest/guide/router.html#!#asynchronous-routing )
解决方案:为Webpack安装一个lazy loader
来源: https : //medium.com/@daviddentoom/angular-2-lazy-loading-with-webpack-d25fe71c29c1#.lmd8lnkos
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.