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

This is for the latest release of angular(rc4). I have been following the guide for using webpack with angular 2 provided here Angular 2 Webpack intro. No notable errors when packaging with webpack occur. A handful of warnings about dropping unused variables. The website does seem to bootstrap as many of my components load, but not all load correctly. I am receiving the following error

Uncaught ReferenceError: System is not defined

Along with many REST errors that don't make much of any sense. I am running the webpack-dev-server locally on port 8080, but I am not sure why it is trying to perform REST calls to it. I am making rest calls to another machine in some components but those are not being fired off.

POST http://localhost:8080/undefinedsession 404 (Not Found)

I have my webpack configured very similarly to the example in the angular doc. I am already using

"module": "commonjs",

in my tsconfig.json (as suggested here). Note that in my vendor.ts, I have commented out many references to systemjs modules. The example from the angular doc says they were removed in lieu of webpack. When I include them, I still see the system not defined error, along with additional errors

./~/systemjs/dist/system.src.js Critical dependencies: 1642:42-49 require function is used in a way in which dependencies cannot be statically extracted

Anyone else having this issue?

Here's my webpack.common.js:

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var helpers = require('./helpers');
var path = require('path');

module.exports = {
    entry: {
        'polyfills': './app/polyfills.ts',
        'vendor': './app/vendor.ts',
        'app': './app/main.ts'
    },

    resolve: {
        extensions: ['', '.js', '.ts', '.config'],
        root: [path.resolve('./')]
    },

    node: {
        fs: "empty"
    },

    module: {
        loaders: [
          {
              test: /\.ts$/,
              loaders: ['ts', 'angular2-template-loader']
          },
          {
              test: /\.html$/,
              loader: 'html'
          },
          {
              test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
              loader: 'file?name=assets/[name].[hash].[ext]'
          },
          {
              test: /\.config$/,
              loader: 'file'
          },
          {
              test: /\.css$/,
              exclude: helpers.root('src', 'app'),
              loader: ExtractTextPlugin.extract('style', 'css?sourceMap')
          },
          {
              test: /\.css$/,
              include: helpers.root('src', 'app'),
              loader: 'raw'
          }
        ]
    },

    plugins: [
      new webpack.optimize.CommonsChunkPlugin({
          name: ['app', 'vendor', 'polyfills']
      }),

      new HtmlWebpackPlugin({
          template: 'index.html'
      })
    ]
};

And here is the webpack.dev.js:

var webpackMerge = require('webpack-merge');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var commonConfig = require('./webpack.common.js');
var helpers = require('./helpers');

module.exports = webpackMerge(commonConfig, {
    devtool: 'cheap-module-eval-source-map',

    output: {
        path: helpers.root('dist'),
        publicPath: 'http://localhost:8080/',
        filename: '[name].js',
        chunkFilename: '[id].chunk.js'
    },

    plugins: [
      new ExtractTextPlugin('[name].css')
    ],

    devServer: {
        historyApiFallback: true,
        stats: 'minimal'
    }
});

Note that I have setup three entry files in line with the angular doc. Here are those for completeness

Main.ts:

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { HTTP_BINDINGS, HTTP_PROVIDERS } from '@angular/http';
import { disableDeprecatedForms, provideForms } from '@angular/forms';
import 'rxjs/Rx';

import { enableProdMode, provide, PLATFORM_DIRECTIVES } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';
import { Title } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { AppSettingsService } from './app.settings';
import { APP_ROUTER_PROVIDERS } from './app.routes';

// css
import 'css/material.blue_grey-blue.min.css';
import 'css/styles.css';

bootstrap(AppComponent, [
    APP_ROUTER_PROVIDERS,
    HTTP_BINDINGS,
    HTTP_PROVIDERS,
    Title,
    AppSettingsService,
    disableDeprecatedForms(),
    provideForms(),
    provide(PLATFORM_DIRECTIVES, { useValue: [ROUTER_DIRECTIVES], multi: true })
]).catch((err: any) => console.error(err));

polyfills.ts:

import 'core-js/es6';
import 'reflect-metadata';

require('zone.js/dist/zone');

if (process.env.ENV === 'production') {
    // Production
} else {
    // Development
    Error['stackTraceLimit'] = Infinity;
    require('zone.js/dist/long-stack-trace-zone');
}

vendor.ts:

// Angular 2
import '@angular/platform-browser';
import '@angular/platform-browser-dynamic';
import '@angular/core';
import '@angular/common';
import '@angular/http';
import '@angular/router';

// RxJS
import 'rxjs';

// From index.html
import 'js/material.js';

//import 'node_modules/core-js/client/shim.min.js';
//import 'node_modules/zone.js/dist/zone.js';
//import 'node_modules/reflect-metadata/Reflect.js';
//import 'node_modules/systemjs/dist/system.src.js';
//import 'systemjs.config.js';