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

回答

相關問題