ASP.NET Core Angular 2 Webpack 热模块替换

Question

我有一个空白的 ASP.NET Core 1.0.1 项目，我正在尝试从头开始将 Angular 2 与 Webpack Module Bundler 集成。我正在尝试使用 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 文件：

"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 存储库包含 Angular 2、Webpack 和 ASP.NET Core 主题，请与我分享。

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

希望这至少有助于作为一个起点！