ASP.NET Core Angular 2 Webpackホットモジュールの交換

Question

Webpack Module Bundlerを使用してAngular 2をゼロから統合しようとしている空のASP.NET Core 1.0.1プロジェクトがあります。ブラウザのリロードを避けるためにASP.NET Core SpaServicesを使用してホットモジュール置換（HMR）を使用しようとしていますが、HMRが接続されているというブラウザのコンソールにメッセージは表示されません。 webpackコマンドを手動で実行して、Typescriptファイルをコンパイルし、アプリケーションを再実行する必要があります。私は"Microsoft.AspNetCore.AngularServices": "1.0.0-*", NuGetパッケージを使用しています。また、私はブラウザのコンソールにエラーとして対処しています：__webpack_hmr connetion refused。以下は私のproject.jsonファイルです：

{ 
    "version": "1.0.0", 
    "name": "asp.net", 
    "private": true, 
    "dependencies": { 
     "@angular/common": "2.4.1", 
     "@angular/compiler": "2.4.1", 
     "@angular/core": "2.4.1", 
     "@angular/forms": "2.4.1", 
     "@angular/http": "2.4.1", 
     "@angular/platform-browser": "2.4.1", 
     "@angular/platform-browser-dynamic": "2.4.1", 
     "@angular/router": "3.4.1", 
     "@angular/upgrade": "2.4.1", 
     "core-js": "^2.4.1", 
     "reflect-metadata": "^0.1.9", 
     "rxjs": "^5.0.3", 
     "zone.js": "^0.7.4" 
    }, 
    "devDependencies": { 
     "html-webpack-plugin": "2.26.0", 
     "tsc": "1.20150623.0", 
     "ts-loader": "2.0.0", 
     "typescript": "2.1.5", 
     "typings": "2.1.0", 
     "webpack-hot-middleware": "2.16.1", 
     "webpack-node-externals": "1.5.4", 
     "webpack-externals-plugin": "1.0.0", 
     "aspnet-webpack": "1.0.27", 
     "webpack": "2.2.1" 
    } 
} 

Startup.csクラスのConfigure()方法：

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory) 
{ 
    loggerFactory.AddConsole(); 
    if (env.IsDevelopment()) 
    { 
     app.UseDeveloperExceptionPage(); 
     app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions 
     { 
      HotModuleReplacement = true 
     }); 
    } 

    app.UseMvc(); 

    DefaultFilesOptions options = new DefaultFilesOptions(); 
    options.DefaultFileNames.Clear(); 
    options.DefaultFileNames.Add("Index.html"); 
    app.UseDefaultFiles(options); 
    app.UseStaticFiles(); 
} 

とwebpack.config.jsファイル：あなたは角2を有する任意の有用なリンクやGitHubのレポを持っている場合にも

"use strict"; 

var webpack = require('webpack'); 

module.exports = { 
    entry: { main: "./app/main.ts" }, 
    output: { 
     filename: '/wwwroot/dist/bundle.js', 
     publicPath: '/wwwroot/dist/' 
    }, 
    module: { 
     rules: [ 
      { test: /\.ts$/, loader: 'ts-loader' }, 
     ] 
    }, 
    plugins: [ 
     // Put webpack plugins here if needed, or leave it as an empty array if not 
    ] 
} 

、WebpackとASP.NETのコアトピックについては、私と共有してください。手始めに

Answer 1

、私はこのブログの記事から素敵なVisual Studioのテンプレートパックをダウンロード - >http://blog.stevensanderson.com/2016/10/04/angular2-template-for-visual-studio/

webpack.config.jsファイルは、「メイン・クライアント」と「メイン・サーバーの」ブートファイルの両方を設定します。それは私がHMRはブラウザ内で有効にされている参照ブートclient.tsである：

import 'angular2-universal-polyfills/browser'; 
import { enableProdMode } from '@angular/core'; 
import { platformUniversalDynamic } from 'angular2-universal'; 
import { AppModule } from './app/app.module'; 
import 'bootstrap'; 

// Enable either Hot Module Reloading or production mode 
if (module['hot']) { 
    module['hot'].accept(); 
    module['hot'].dispose(() => { platform.destroy(); }); 
} else { 
    enableProdMode(); 
} 

・ホープ、少なくとも出発点として役立つこと！