{
  "name": "angular-quickstart",
  "version": "1.0.0",
  "description": "QuickStart package.json from the documentation for visual studio 2017 & WebApi",
  "scripts": {
    "build:prod": "webpack --config config/webpack.prod.js --colors --progress",
    "build": "webpack --colors",
    "build:vendor": "webpack --config config/webpack.vendor.ts --colors",
    "typings": "typings install"
  },
  "keywords": [],
  "author": "",
  "license": "MIT",
  "dependencies": {
    "@angular/common": "^4.1.3",
    "@angular/compiler": "^4.1.3",
    "@angular/core": "^4.1.3",
    "@angular/forms": "^4.1.3",
    "@angular/http": "^4.1.3",
    "@angular/platform-browser": "^4.1.3",
    "@angular/platform-browser-dynamic": "^4.1.3",
    "@angular/router": "^4.1.3",

    "bootstrap": "^3.3.7",
    "core-js": "^2.4.1",
    "jquery": "1.12.4",
    "moment": "^2.18.1",
    "rxjs": "^5.4.0",
    "zone.js": "^0.8.12"
  },
  "devDependencies": {
    "@types/node": "^6.0.46",
    "@types/core-js": "^0.9.41",
    "angular2-template-loader": "^0.6.2",
    "awesome-typescript-loader": "^3.1.3",
    "css-loader": "^0.28.4",
    "extract-text-webpack-plugin": "^2.1.0",
    "file-loader": "^0.11.1",
    "html-loader": "^0.4.5",
    "raw-loader": "^0.5.1",
    "script-loader": "^0.7.0",
    "style-loader": "^0.18.1",
    "typescript": "~2.3.4",
    "webpack": "^2.6.1",
    "webpack-merge": "^4.1.0"
  }
}

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

    resolve: {
        extensions: ['.ts', '.js']
    },

    module: {
        rules: [
            {
                test: /\.ts$/,
                use: [
                    {
                        loader: 'awesome-typescript-loader',
                        options: {
                            configFileName: helpers.root('', 'tsconfig.json')
                        }
                    },
                    {
                        loader: 'angular2-template-loader'
                    }
                ]
            },
            {
                test: /\.html$/,
                use: [{
                    loader: 'html-loader',
                    options: {
                        minimize: false,
                        removeComments: false,
                        collapseWhitespace: false
                    }
                }]
            },
            {
                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
                loader: 'file-loader?name=dist/assets/[name].[hash].[ext]'
            },
            {
                test: /\.css$/,
                exclude: helpers.root('app'),
                loader: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: 'css-loader?sourceMap'
                })
            },
            {
                test: /\.css$/,
                include: helpers.root('app'),
                loader: 'raw-loader'
            }
        ]
    },

    plugins: [
        new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable)
        // Workaround for angular/angular#11580 for angular v4
        new webpack.ContextReplacementPlugin(
            /angular(\\|\/)core(\\|\/)@angular/,
            helpers.root('./app'), // location of your src
            {} // a map of your routes
        ),

        new webpack.optimize.CommonsChunkPlugin({
            //order is important: 
            //The CommonsChunkPlugin identifies the hierarchy among three chunks: app -> vendor -> polyfills. 
            //Where Webpack finds that app has shared dependencies with vendor, it removes them from app. 
            //It would remove polyfills from vendor if they shared dependencies, which they don't.
            name: ['app', 'vendor', 'polyfills']
        }),
    ]
};

module.exports = webpackMerge(commonConfig, {
  devtool: 'source-map',
  
  output: {
      path: helpers.root('dist'),
      publicPath: '/',
    filename: '[name].js',
    chunkFilename: '[id].chunk.js'
  },
  
  plugins: [
      new ExtractTextPlugin('[name].css')
  ]
});

<!DOCTYPE html>
<html>
<head>
    <title>Angular.io QuickStart</title>
    <base href=/ >
    <meta charset=UTF-8>
    <meta name=viewport content="width=device-width,initial-scale=1">    
    <link rel="stylesheet" href="./dist/vendor.css" />
</head>
<body>
    <my-app>Loading App</my-app>
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <!--<script src="node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="node_modules/core-js/client/shim.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>-->
<script type="text/javascript" src="./dist/polyfills.js"></script>
<script type="text/javascript" src="./dist/vendor.js"></script>
<script type="text/javascript" src="./dist/app.js"></script></body>
</html>

@Injectable()
export class ApiService {
    private apiUrl: string;

    constructor(private http: Http) {
        this.apiUrl = "/api";
    }

    private setHeaders(): Headers {
        const headersConfig = {
            'Content-Type': 'application/json',
            'Accept': 'application/json'
        };

        return new Headers(headersConfig);
    }

    private formatErrors(error: any) {
        return Observable.throw(error.json());
    }

    get(path: string, params: URLSearchParams = new URLSearchParams()): Observable<any> {
        return this.http.get(`${this.apiUrl}${path}`, { headers: this.setHeaders(), search: params })
            .catch(this.formatErrors)
            .map((res: Response) => res.json());
    }

    //put(path: string, body: Object = {}): Observable<any> {
    //    return this.http.put(...);
    //}

    //post(path: string, body: Object = {}): Observable<any> {
    //    return this.http.post(...);
    //}

    //delete(path): Observable<any> {
    //    return this.http.delete(...));
    //}
}

export class HomeSiteComponent {
    title = "I'm home-site component with WebApi data fetching";
    public ctrlData: DummyData[];

    constructor(apiService: ApiService) {
        apiService.get('/Dummier/Get').subscribe(result => {
            this.ctrlData = <DummyData[]>result;
        });
    }
}

interface DummyData {
    clientData: string;
    serverData: string;
}

const routes: Routes = [    
    { path: 'welcome', component: WelcomeComponent },       //Component w/o Menu item
    { path: 'home', loadChildren: () => HomeSiteModule },   //Feature Modul with own Routing
    { path: 'area1', loadChildren: () => Area1SiteModule }, //Feature Modul with own Routing
    { path: '', redirectTo: 'home', pathMatch: 'full' },    //Empty Route
    { path: '**', component: PageNotFoundComponent }        //"404" Route
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule],
})
export class AppRoutingModule { }

<system.webServer>
   ...
    <rewrite>
      <rules>
        <rule name="WebApi Routes" stopProcessing="true">
          <match url="^api/" />
          <action type="None" />
        </rule>
        <rule name="Angular Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>     
      </rules>
    </rewrite>
  </system.webServer>