我可以同时热模块重新加载服务器（.NET Core）和客户端（Angular）吗？答案

【问题标题】：Can I hot module reload the server (.NET Core) and client (Angular) at the same time?我可以同时热模块重新加载服务器（.NET Core）和客户端（Angular）吗？
【发布时间】：2018-06-16 10:26:29
【问题描述】：

我正在使用 'dotnet watch run' 来观察我的服务器代码的变化，并使用 'ng build --watch' 来观察我的 Angular 代码的变化.两者都分别将代码正确地重建为 "bin/" 和 "wwwroot/"。

myapp.csproj

<Project Sdk="Microsoft.NET.Sdk.Web">

  <PropertyGroup>
    <TargetFramework>myapp</TargetFramework>
  </PropertyGroup>

  <ItemGroup>
    <Folder Include="wwwroot\" />
  </ItemGroup>

  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.All" Version="2.0.0" />
  </ItemGroup>

  <ItemGroup>
    <DotNetCliToolReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Tools" Version="2.0.0" />
  </ItemGroup>

  <ItemGroup>
    <DotNetCliToolReference Include="Microsoft.DotNet.Watcher.Tools" Version="2.0.0" />
  </ItemGroup>

  <ItemGroup>
    <!-- extends watching group to include *.js files -->
    <Watch Include="wwwroot\*.js;bin\**\*"/> <!-- Exclude="node_modules\**\*;**\*.js.map;obj\**\*;bin\**\*" /> -->
  </ItemGroup>

</Project>

我的 Startup.cs 设置为从“wwwroot”文件中读取并提供我转译的 TypeScript。

Startup.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using Microsoft.Extensions.Options;
// using Microsoft.AspNetCore.SpaServices.Webpack;

namespace myapp
{
    public class Startup
    {
        public Startup(IConfiguration configuration)
        {
            Configuration = configuration;
        }

        public IConfiguration Configuration { get; }

        // This method gets called by the runtime. Use this method to add services to the container.
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddMvc();
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
                /*app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions {
                    HotModuleReplacement = true
                });*/
            }
            app.UseDefaultFiles(); // URL rewriter to serve default web page
            app.UseStaticFiles(); // makes files in wwwroot servable
            app.UseMvc();
        }
    }
}

我同时使用 "npm run saw" 运行项目，因此两个 watch 命令可以在同一个终端中。我希望客户端和服务器在同一个端口上运行，这就是为什么我让“dotnet run”为应用程序提供服务。

package.json

"scripts": {
    "ng": "ng",
    "start:client": "ng serve",
    "build:client": "ng build",
    "build:client:watch": "ng build --watch",
    "build:server": "dotnet build",
    "build:all": "npm run build:client && npm run build:server",
    "build:client:prod": "ng build --prod --env=prod",
    "build:all:prod": "npm run build:client:prod && npm run build:server",
    "test:client": "ng test",
    "lint:client": "ng lint",
    "e2e:client": "ng e2e",
    "restore": "dotnet restore",
    "start:all": "ng serve --live-reload false && dotnet run",
    "start:all:watch": "concurrently -k \"npm run build:client:watch\" \"dotnet watch run\"",
    "saw": "npm run start:all:watch"
  }

最后，这是我的整体项目结构。如果我在 dotnet core 检测到“wwwroot”（或服务器在"bin") 已经重建了吗？

【问题讨论】：

标签： javascript c# asp.net angular typescript

【解决方案1】：

我刚刚为 Angular CLI 创建了一个代理配置，以解决热模块使用一个命令重新加载客户端和服务器的问题。如果仅更改服务器代码，则仍需要刷新。现在我将在不同的端口上运行客户端和服务器，并使用 "ng serve --proxy-config proxy.config.json" 运行客户端和 "dotnet watch run" 运行服务器。

Create a proxy config for Angular CLI

目前 "Startup.cs" 将不再从 "wwwroot" 文件夹（UseDefaultFiles() 和 UseStaticFiles() 函数已被移除）。

如果您在运行最新的服务器代码之前编辑了 *.csproj 文件，请务必运行 "dotnet restore"。

【讨论】：