GeorgDangl/Index.cshtml

## Index.cshtml
<!DOCTYPE html>
<html>
<head>
    <title>NetCoreHeroes</title>
    <link rel="icon" type="image/png" href="/favicon.png">
    <base href="@ViewData["AngularBase"]" />
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <my-app>Loading...</my-app>
    <script src="~/dist/vendor.js"></script>
    <script src="~/dist/main.js"></script>
</body>
</html>

## main.ts
import 'zone.js';
import 'reflect-metadata';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
require("style-loader!raw-loader!./styles.css");

platformBrowserDynamic().bootstrapModule(AppModule);

## package.json
{
  "name": "net-core-heroes",
  "version": "1.0.0",
  "scripts": {
    "postinstall": "npm run webpack:vendor",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "webpack": "webpack --config webpack.config.js",
    "webpack:vendor": "webpack --config webpack.config.vendor.js"
  },
  "license": "ISC",
  "dependencies": {
    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/core": "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/router": "3.0.0",
    "@angular/upgrade": "2.0.0",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "^0.6.23",
    "es6-shim": "0.35.1"
  },
  "devDependencies": {
    "systemjs": "0.19.27",
    "typescript": "2.1.6",
    "webpack": "2.2.1",
    "awesome-typescript-loader": "3.0.4",
    "angular2-template-loader": "0.6.2",
    "css-loader": "0.26.1",
    "to-string-loader": "1.1.5",
    "html-loader": "0.4.4",
    "style-loader": "0.13.1",
    "raw-loader": "0.5.1",
    "@types/node": "^6.0.42",
    "@types/jasmine": "2.5.43",
    "@types/core-js": "0.9.35"
  }
, "-vs-binding":{"BeforeBuild":["webpack"]}
}

## webpack.config.js
const path = require('path');
const webpack = require('webpack');

module.exports = {
    context: __dirname,
    resolve: { extensions: ['.ts', '.js'] }, // .ts is first so that .ts files are preffered over js file, this ensures
    // that angular 2 components are passed through the angular2-template-loader and have their templates and styles inlined
    entry: { 'main': './App/main.ts' },
    output: {
        path: path.join(__dirname, './wwwroot/dist'),
        filename: '[name].js',
        publicPath: '/dist/'
    },
    module: {
        rules: [
            { test: /\.ts$/, include: /App/, use: ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] },
            { test: /\.html$/, use: 'html-loader?minimize=false' },
            { test: /\.css$/, use: ['to-string-loader', 'css-loader'] }
        ]
    },
    plugins: [
        new webpack.DllReferencePlugin({
            context: __dirname,
            manifest: require('./wwwroot/dist/vendor-manifest.json')
        }),
        new webpack.optimize.UglifyJsPlugin()
    ]
};

## webpack.config.vendor.js
const path = require('path');
const webpack = require('webpack');

module.exports = {
    resolve: { extensions: ['.js'] },
    entry: {
        vendor: [
            '@angular/core',
            '@angular/common',
            '@angular/compiler',
            '@angular/platform-browser',
            '@angular/platform-browser-dynamic',
            '@angular/http',
            '@angular/router',
            '@angular/forms',
            'es6-shim',
            'rxjs',
            'zone.js'
        ]
    },
    output: {
        path: path.join(__dirname, 'wwwroot', 'dist'),
        publicPath: '/dist/',
        filename: '[name].js',
        library: '[name]_[hash]'
    },
    plugins: [
        new webpack.DllPlugin({
            path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'),
            name: '[name]_[hash]'
        }),
        new webpack.optimize.UglifyJsPlugin()
    ]
}
	<!DOCTYPE html>
	<html>
	<head>
	<title>NetCoreHeroes</title>
	<link rel="icon" type="image/png" href="/favicon.png">
	<base href="@ViewData["AngularBase"]" />
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
	<body>
	<my-app>Loading...</my-app>
	<script src="~/dist/vendor.js"></script>
	<script src="~/dist/main.js"></script>
	</body>
	</html>
	import 'zone.js';
	import 'reflect-metadata';
	import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
	import { AppModule } from './app.module';
	require("style-loader!raw-loader!./styles.css");

	platformBrowserDynamic().bootstrapModule(AppModule);
	{
	"name": "net-core-heroes",
	"version": "1.0.0",
	"scripts": {
	"postinstall": "npm run webpack:vendor",
	"tsc": "tsc",
	"tsc:w": "tsc -w",
	"webpack": "webpack --config webpack.config.js",
	"webpack:vendor": "webpack --config webpack.config.vendor.js"
	},
	"license": "ISC",
	"dependencies": {
	"@angular/common": "2.0.0",
	"@angular/compiler": "2.0.0",
	"@angular/core": "2.0.0",
	"@angular/forms": "2.0.0",
	"@angular/http": "2.0.0",
	"@angular/platform-browser": "2.0.0",
	"@angular/platform-browser-dynamic": "2.0.0",
	"@angular/router": "3.0.0",
	"@angular/upgrade": "2.0.0",
	"core-js": "^2.4.1",
	"reflect-metadata": "^0.1.3",
	"rxjs": "5.0.0-beta.12",
	"zone.js": "^0.6.23",
	"es6-shim": "0.35.1"
	},
	"devDependencies": {
	"systemjs": "0.19.27",
	"typescript": "2.1.6",
	"webpack": "2.2.1",
	"awesome-typescript-loader": "3.0.4",
	"angular2-template-loader": "0.6.2",
	"css-loader": "0.26.1",
	"to-string-loader": "1.1.5",
	"html-loader": "0.4.4",
	"style-loader": "0.13.1",
	"raw-loader": "0.5.1",
	"@types/node": "^6.0.42",
	"@types/jasmine": "2.5.43",
	"@types/core-js": "0.9.35"
	}
	, "-vs-binding":{"BeforeBuild":["webpack"]}
	}
	const path = require('path');
	const webpack = require('webpack');

	module.exports = {
	context: __dirname,
	resolve: { extensions: ['.ts', '.js'] }, // .ts is first so that .ts files are preffered over js file, this ensures
	// that angular 2 components are passed through the angular2-template-loader and have their templates and styles inlined
	entry: { 'main': './App/main.ts' },
	output: {
	path: path.join(__dirname, './wwwroot/dist'),
	filename: '[name].js',
	publicPath: '/dist/'
	},
	module: {
	rules: [
	{ test: /\.ts$/, include: /App/, use: ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] },
	{ test: /\.html$/, use: 'html-loader?minimize=false' },
	{ test: /\.css$/, use: ['to-string-loader', 'css-loader'] }
	]
	},
	plugins: [
	new webpack.DllReferencePlugin({
	context: __dirname,
	manifest: require('./wwwroot/dist/vendor-manifest.json')
	}),
	new webpack.optimize.UglifyJsPlugin()
	]
	};