Angular2 ReferenceError: System is not defined when using webpack

Question

I get an error similar to: Angular2 + webpack Uncaught ReferenceError: System is not defined

...or

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

I am using latest npm package.json settings from:

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

I did not find any solutions for this issue. I am using ASP.NET local IIS server. Project starts on 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

Like you, I followed the Angular 2 guide I expected my application to build and run successfully with Webpack instead of SystemJS. Yeah, right! For me, it turned out to be caused by lazy loaded modules .

If you specify 'loadChildren' in any of your route definitions, Angular 2 defaults to using the SystemJS module loader to retrieve the module. Unless you provide another loader (see https://angular.io/docs/ts/latest/guide/router.html#!#asynchronous-routing )

Solution: Install a lazy loader for Webpack

• Install npm package 'angular2-router-loader' as a dev. dependency
• Add 'angular2-router-loader' to the TypeScript loaders in webpack config
• You may have to specify paths in 'loadChildren' with a leading './' (opposed to absolute or 'implicitly relative')
• Build, run and jump with joy when it finally works

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