Join the Stack Overflow Community
Stack Overflow is a community of 6.5 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up

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)
share|improve this question
    
did you have any luck fixing this one. I have the same issue? – Gary Holland Oct 15 at 22:53

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

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.