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 repo有Angular 2，Webpack和ASP.NET Core主题，请与我分享。

Answer 1

对于初学者，我从这篇博文中下载了一个很好的Visual Studio模板包 - ＆gt; http://blog.stevensanderson.com/2016/10/04/angular2-template-for-visual-studio/

webpack.config.js文件配置＆＃34;主客户端＆＃34;和＆＃34;主服务器＆＃34;启动文件。我在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();
}

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

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

1 个答案: