Webpack: uncaught Unexpected value 'AppComponent' declared by the module 'DynamicModule'

Question

I have created a webpack bundle of Angular2 and typescript project for production and I get the above error when deployed on IIS and try to browse. No problems in dev mode. Any help is appreciated. The configuration is as follows:

Webpack.prod.config.js:

var path = require('path');
var webpack = require('webpack');
var CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;
var Autoprefixer = require('autoprefixer');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var CleanWebpackPlugin = require('clean-webpack-plugin');
var helpers = require('./webpack.helpers');
var WebpackNotifierPlugin = require('webpack-notifier');

module.exports = {

entry: {

    'app': './app/main.ts' // our angular app
},

output: {
    path: "./",
    filename: './dist/[name].bundle.js',
    publicPath: "/static"
},

resolve: {
    extensions: ['', '.ts', '.js', '.json', '.css', '.scss', '.html']
},

//devServer: {
//    historyApiFallback: true,
//    stats: 'minimal',
//    outputPath: path.join(__dirname, '/')
//},

module: {
    loaders: [
        {
            test: /\.ts(x?)$/,
            loader: 'ts-loader',
            query: {
                presets: ["es2015"],
                'ignoreDiagnostics': [
                    2403, // 2403 -> Subsequent variable declarations
                    2300, // 2300 -> Duplicate identifier
                    2374, // 2374 -> Duplicate number index signature
                    2375, // 2375 -> Duplicate string index signature
                    2502 // 2502 -> Referenced directly or indirectly
                ]
            },
            exclude: [/node_modules\/(?!(ng2-.+))/]
        },

        // copy those assets to output
        {
            test: /\.(png|jpg|gif|ico|woff|woff2|ttf|svg|eot)$/,
            exclude: /node_modules/,
            loader: "file?name=assets/[name]-[hash:6].[ext]"
        },

        // Load css files which are required in vendor.ts
        {
            test: /\.css$/,
            exclude: /node_modules/,
            loader: "style-loader!css-loader"
        },

        {
            test: /\.scss$/,
            exclude: /node_modules/,
            loader: 'raw-loader!style-loader!css-loader!sass-loader'
        },

        {
            test: /\.html$/,
            loader: 'raw'
        }
    ],
    noParse: [/.+zone\.js\/dist\/.+/, /.+angular2\/bundles\/.+/, /angular2-polyfills\.js/]
},

plugins: [
    new CleanWebpackPlugin(
        [
            './dist',
            './fonts',
            './assets'
        ]
    ),
    new webpack.ProvidePlugin({
        Reflect: 'core-js/es7/reflect'
    }),
    //new webpack.NoErrorsPlugin(),
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.UglifyJsPlugin(),
    new CommonsChunkPlugin({
        name: ['vendor', 'polyfills', 'app']
    }),

    new HtmlWebpackPlugin({
        filename: 'index.html', // destination file
        inject: 'body',
        chunksSortMode: helpers.packageSort(['polyfills', 'vendor', 'app']),
        template: 'index.html'
    }),

    new CopyWebpackPlugin([
        {
            from: './app/assets/*.*', to: "./dist/assets/", flatten: true
        }
    ]),
    new CopyWebpackPlugin([
        {
            from: 'index.html', to: './dist/index.html'
        }
    ]),
    new CopyWebpackPlugin([
        {
            from: './app/home/welcome.component.html', to: "./dist/app/home/welcome.component.html"

        }
    ]),
    new CopyWebpackPlugin([
        {
            from: './app/sites/site-list.component.html', to: "./dist/app/sites/site-list.component.html"
            //from: 'index.html', to: './dist/index.html'
        }
    ])

]

};

main.ts:

import { bootstrap } from '@angular/platform-browser-dynamic';

// Our main component
import { AppComponent } from './app.component';

// Our main routes
import { APP_ROUTER_PROVIDERS } from './app.routes';
import { Title } from '@angular/platform-browser';

import 'zone.js/dist/zone';

import 'reflect-metadata';
import { enableProdMode } from '@angular/core';

enableProdMode(); // Keep this commented for dev mode

bootstrap(AppComponent, [
    APP_ROUTER_PROVIDERS,
    Title
])
 .catch(err => console.error(err));

When the bundle is created and deployed on IIS and try to browse to index.html, I get the error:

app.bundle.js:19218 Uncaught Unexpected value 'AppComponent' declared by the module 'DynamicModule'

index.html:

<!DOCTYPE html> 
<html> 
<head lang=en> 
    <base href=.> 
    <meta charset=UTF-8> 
    <meta name=viewport content="width=device-width,initial-scale=1"> 
    <title>Bingo Transaction Processor Management</title> 
    <meta http-equiv=content-type content="text/html; charset=utf-8"/> 
    <meta name=viewport content="width=device-width,initial-scale=1"/> 

</head> 
<body> 
    <pm-app>Loading App...</pm-app> 
    <script src=/dist/polyfills.bundle.js>
    </script> <script src=/dist/vendor.bundle.js>
    </script> <script src=/dist/app.bundle.js></script> 
</body> 
</html>