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

Posted 2023-03-15

【中文标题】ASP.NET Core Angular 2 Webpack 热模块替换

【英文标题】：ASP.NET Core Angular 2 Webpack Hot Module Replacement

【发布时间】：2017-06-20 01:47:52

【问题描述】：

我有一个空白的 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 主题，请与我分享。

【参考方案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();

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

【讨论】：

此包已安装。我尝试过这个。但我正在用最少的组件和配置从头开始编写一个项目。

Angular 4 怎么样 - angular2-universal 现在已经死了

想要留下这个，以防万一任何 ASP Core 2 人发现这个线程。从 ASP Core 2 开始，角度模板现在已内置到工具包中。您可以使用以下 CLI 命令 dotnet new angular

设置新项目