Angular2的ReferenceError：使用的WebPack

当系统没有定义我得到类似的错误： Angular2 + webpack Uncaught ReferenceError: System is not defined Angular2的ReferenceError：使用的WebPack

...或

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)

来源

2016-09-27 Darien Fawkes

没有你的运气如何修复这一项。我有同样的问题？ –

和你一样，我也跟着角2导游，我希望我的应用程序来构建和的WebPack代替SystemJS成功运行。对，对！对我来说，原来是由延迟加载模块造成的。

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

解决方案：安装一个懒加载器的WebPack

安装NPM包 'angular2路由器装载机' 作为一个开发。依赖
增加“angular2路由器装载机”中的WebPack配置的打字稿装载机
您可能需要与一家领先的指定“loadChildren”路径“./”（不是绝对或‘隐相对’）
构建，运行和喜悦跳的时候，它终于作品

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

来源

2016-10-18 06:52:00 StephenRUK

很好的答案。你统治。 –

Angular2的ReferenceError：使用的WebPack

回答

相关问题