Angular2 ReferenceError：使用 webpack 时未定义系统

Question

我收到类似于以下内容的错误： Angular2 + webpack Uncaught ReferenceError: System is not defined

...或

Angular 2 with webpack - Uncaught ReferenceError: System is not defined

我正在使用来自以下位置的最新 npm package.json 设置：

http://angular.io/docs/ts/latest/guide/npm-packages.html

我没有找到任何解决此问题的方法。我正在使用 ASP.NET 本地 IIS 服务器。项目从 Visual Studio Commutity 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)

Answer 1

和你一样，我遵循 Angular 2 指南，我希望我的应用程序能够使用 Webpack 而不是 SystemJS 成功构建和运行。对，对！对我来说，它原来是由延迟加载的模块引起的。

如果您在任何路由定义中指定“loadChildren”，Angular 2 默认使用 SystemJS 模块加载器来检索模块。 除非你提供另一个加载器（见https://angular.io/docs/ts/latest/guide/router.html#!#asynchronous-routing）

解决方案：为 Webpack 安装一个惰性加载器

• 作为开发者安装 npm 包 'angular2-router-loader'。依赖
• 将“angular2-router-loader”添加到 webpack 配置中的 TypeScript 加载器
• 您可能必须在“loadChildren”中指定路径，并以“./”开头（相对于绝对或“隐式相对”）
• 当它最终成功时，尽情地建造、奔跑和跳跃

来源：https://medium.com/@daviddentoom/angular-2-lazy-loading-with-webpack-d25fe71c29c1#.lmd8lnkos