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'作为dev。依赖
将“angular2-router-loader”添加到webpack config
您可能必须在'loadChildren'中使用前导'。'指定路径（与绝对或'隐式相对'相对）
当它最终运作时，快乐地建立，奔跑和跳跃

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

Angular2 ReferenceError：使用webpack

1 个答案: