VS2015 MVC project with Angular2 and Webpack errors

Question

I have a created in VS2015 MVC project with Angular2 and Webpack. I am trying to accomplish 3 things.

1. Bundle all the js into 3 files (app.bundle.js, polyfills.bundle.js, vendor.bundle.js)

2. Imbed all the html templates from the component templateUrl into app.bundle.js file.

3. It would be great to minify the js files. I have not gotten to this point yet.

I am getting the errors below and the app.bundle.js and vendor.bundle.js is just 1K file Errors

Build:Cannot find module 'protractor'. e2e\app.e2e-spec.ts Build:Duplicate identifier 'PropertyKey'. node_modules\@types\core-js\index.d.ts 21
Build:Duplicate identifier 'export='. node_modules\@types\core-js\index.d.ts 1513

My full project is here https://github.com/cjohnst/Angular2MVC2015

package.json

{
  "name": "Angular2MVC2015",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "start": "tsc && npm install && npm run build && \"dotnet run\" ",
    "startWebpackDevServer": "webpack-dev-server --inline --progress --port 8080",
    "build": "SET NODE_ENV=development && webpack -d --color && dotnet run",
    "buildProduction": "SET NODE_ENV=production && webpack -d --color",
    "lint": "tslint ./Angular2/**/*.ts -t verbose",
    "tsc": "tsc",
    "tsc:w": "tsc -w"
  },
  "keywords": [],
  "dependencies": {
    "@angular/common": "~2.2.0",
    "@angular/compiler": "~2.2.0",
    "@angular/core": "~2.2.0",
    "@angular/forms": "~2.2.0",
    "@angular/http": "~2.2.0",
    "@angular/platform-browser": "~2.2.0",
    "@angular/platform-browser-dynamic": "~2.2.0",
    "@angular/router": "~3.2.0",
    "@angular/upgrade": "~2.2.0",
    "angular-in-memory-web-api": "~0.1.15",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.8",
    "rxjs": "5.0.0-beta.12",
    "systemjs": "0.19.39",
    "zone.js": "^0.6.25",
    "bootstrap": "^3.3.7",
    "angular2-toaster": "^1.0.1",
    "jquery": "2.2.4",
    "ng2-slim-loading-bar": "^2.0.4"
  },
  "devDependencies": {
    "@types/core-js": "^0.9.34",
    "@types/node": "^6.0.45",
    "@types/jasmine": "^2.5.35",
    "angular2-template-loader": "^0.4.0",
    "awesome-typescript-loader": "^2.2.4",
    "css-loader": "^0.23.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.8.5",
    "html-loader": "^0.4.3",
    "html-webpack-plugin": "^2.15.0",
    "jasmine-core": "^2.4.1",
    "karma": "^1.2.0",
    "karma-jasmine": "^1.0.2",
    "karma-phantomjs-launcher": "^1.0.2",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "^1.8.0",
    "null-loader": "^0.1.1",
    "phantomjs-prebuilt": "^2.1.7",
    "raw-loader": "^0.5.1",
    "rimraf": "^2.5.2",
    "style-loader": "^0.13.1",
    "typescript": "^2.0.3",
    "webpack": "^1.13.0",
    "webpack-dev-server": "^1.14.1",
    "webpack-merge": "^0.14.0",
    "concurrently": "^3.0.0",
    "lite-server": "^2.2.2",
    "typings": "^1.4.0",
    "tslint": "^3.7.4",
    "lodash": "^4.11.1",
    "ts-loader": "^0.8.1",
    "webpack-stream": "^3.2.0",
    "clean-webpack-plugin": "0.1.10",
    "sass-loader": "^3.1.2",
    "node-sass": "3.8.0"
  }
}

webpack.config.js

var ExtractTextPlugin = require("extract-text-webpack-plugin");
var webpack = require("webpack");
var HtmlWebpackPlugin = require("html-webpack-plugin");
var CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
    entry: {
        "polyfills": "./Angular2/polyfills.browser.ts",
        "vendor": "./Angular2/vendor.browser.ts",
        "app": "./Angular2/main.ts"
    },
    resolve: {
        extensions: ['', '.ts', '.js', '.json', '.css', '.scss', '.html']
    },
    output: {
        path: "./wwwroot",
        filename: "[name].bundle.js"
    },

    module: {
        loaders: [
            {
                test: /\.ts$/,
                loaders: ['awesome-typescript-loader', 'angular2-template-loader']
            },
            {
                test: /\.html$/,
                loader: "html"
            },
            {
                test: /\.(png|jpg|gif|ico|woff|woff2|ttf|svg|eot)$/,
                loader: "file?name=assets/[name].[ext]",
            },

            // Load css files which are required in vendor.ts
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract('style', 'css')
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin("css/[name].bundle.css"),
        new webpack.optimize.CommonsChunkPlugin({
            name: ["app", "vendor", "polyfills"]
        }),
        new CleanWebpackPlugin(
            [
                "./wwwroot"
            ]
        ),
  

        new webpack.ProvidePlugin({
            jQuery: 'jquery',
            $: 'jquery',
            jquery: 'jquery'
        })
    ],
    devServer: {
        historyApiFallback: true,
        stats: "minimal"
    }
};

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "typeRoots": [
      "./node_modules/@types/"
    ]
  },
  "compileOnSave": true,
  "exclude": [
    "node_modules/*",
    "**/*-aot.ts"
  ]
}

Thank you for your help

Answer 1

I think you are getting error Cannot find module 'protractor' because you have not exclude your spec and e2e test case file while generating build for production so you need to change your awesome-typescript-loader configuration in your webpack.config.js file as below :

loaders: [
  {
    test: /\.ts$/,
    loaders: ['awesome-typescript-loader', 'angular2-template-loader'],
    exclude: [/\.(spec|e2e)\.ts$/]
  }
]

And to minify the js file you can use UglifyJsPlugin plugin for webpack as below :

const UglifyJsPlugin =  require('webpack/lib/optimize/UglifyJsPlugin');

plugins: [
  new UglifyJsPlugin({
    beautify: false, //prod
    mangle  : {
      screw_ie8: true,
      keep_fnames: true
    },
    compress: { screw_ie8: true },
    comments: false
  });
]