ASP.NET Core Angular 2 Webpack Hot Module Замена

Question

У меня есть пустой проект ASP.NET Core 1.0.1, где я пытаюсь интегрировать Angular 2 с нуля с помощью Webpack Module Bundler. Я пытаюсь использовать Hot Module Replacement (HMR) с помощью ASP.NET Core SpaServices, чтобы избежать перезагрузки браузера, но я не получаю никаких сообщений на консоли браузера, говорящих, что HMR подключен! Мне нужно вручную запустить команду webpack для компиляции файлов Виджета и повторного запуска приложения. Я использую пакет "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" 
    } 
} 

Configure() метод The ​​Startup.cs класса:

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 файл:

"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 
    ] 
} 

Кроме того, если у вас есть какие-либо полезные ссылки или GitHub репо, имеющий угловую 2 , Webpack и ASP.NET Основные темы, пожалуйста, поделитесь со мной.

Answer 1

Для начала, я скачал хороший Визуальный пакет шаблонов Студия из этого блога ->http://blog.stevensanderson.com/2016/10/04/angular2-template-for-visual-studio/

Файл webpack.config.js настраивает как на «главный-клиент» и «главный сервер» загрузочный файл. Он находится в Boot-client.ts, что я вижу HMR быть включен в браузере:

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(); 
} 

Надеется, что по крайней мере, помогает в качестве отправной точки!