ASP.NET 核心 Angular 2 Webpack 热模块更换

Question

我有一个空白的 ASP.NET Core 1.0.1项目，我正在尝试从头开始将Angular 2与Webpack Module Bundler集成。我正在尝试使用 ASP.NET 核心SpaServices使用热模块更换（HMR）以避免浏览器重新加载，但我在浏览器控制台上没有收到任何消息，说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"
    }
}

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文件：

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

另外，如果您有任何有用的链接或具有Angular 2，Webpack和 ASP.NET 核心主题的GitHub存储库，请与我分享。

Answer 1

首先，我从这篇博文中下载了一个不错的Visual Studio模板包-> 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();
}

希望至少作为一个起点有所帮助！