如何获取 Angular TS 文件以在 .Net Core 项目中保存时进行编译和更新？

Question

所以我在这里用 .Net Core 在 Angular CLI 上观看了第 9 频道的视频：https://channel9.msdn.com/Shows/Visual-Studio-Toolbox/Angular-and-NET-Core

在 8:15 位置，他演示了自动同步，其中更新 Angular CLI 文件夹中的 .ts 文件在保存时编译，然后导致视图更新。我试过了，它根本不更新（除非我刷新整个页面）。

我还注意到模板不是开箱即用的（大惊喜）。我设法将其更新到较新的 Angular 版本（并且运行出现错误，其中模板错误地创建了 "start": "ng serve --extract-css", 到 package.json，其中 --extract-css 无效并且不得不删除它）。我还假设 Visual Studio (2017) 会自行编译 Angular，但事实并非如此，所以我将其添加到项目文件中：

  <Target Name="NgDebug" BeforeTargets="Build" Condition=" '$(Configuration)' == 'Debug' ">
    <!--Run Angular build in debug mode (NOTE: does not support symbolic links nor junction points)-->
    <Message Importance="high" Text="Building the Angular code in debug (dev) mode ..." />
    <Exec WorkingDirectory="$(SpaRoot)" Command="ng build" />
  </Target>

  <Target Name="NgRelease" BeforeTargets="Build" Condition=" '$(Configuration)' == 'Release' ">
    <!--Run Angular build in prod mode (NOTE: does not support symbolic links nor junction points)-->
    <Message Importance="high" Text="Building the Angular code in release (prod) mode ..." />
    <Exec WorkingDirectory="$(SpaRoot)" Command="ng build --prod" />
  </Target>

这里有两个问题：

此同步功能预计今天可以使用吗？是否需要配置？
我应该自己设置 ng build 步骤，还是我应该为 ASP.Net 核心（使用 Angular CLI）模板使用不同的方法？

这里是 app.UseSpa 代码：

    app.UseSpa(spa =>
    {
        // To learn more about options for serving an Angular SPA from ASP.NET Core,
        // see https://go.microsoft.com/fwlink/?linkid=864501

        spa.Options.SourcePath = "ClientApp";

        if (env.IsDevelopment())
        {
            spa.UseAngularCliServer(npmScript: "start");
        }
    });

Answer 1

所以看起来正确的术语是 "Hot Module Replacement"（MHR - 又名 "Live Reloading"，或 "Hot Updates/Reloading"）。遵循这个答案让我走到了那里：

在此处找到缺少的部分：https://github.com/aspnet/JavaScriptServices/issues/1654#issuecomment-430053872

这两个 link 似乎都表明 Visual Studio 创建的模板已准备好用于生产而非开发。这两个问题是：

如果您在 Visual Studio 之外构建，可能会在某个时候创建 ClientApp\dist 文件夹。手动创建的 dist 文件夹的存在将中断实时重新加载。必须完全删除此文件夹。
VS ASP.Net Core Angular CLI 模板已准备好在生产模式下提供静态文件。模板创建者无法包装部分以防止在开发模式下加载。

对于 #2，更改这些行：

public Startup(IConfiguration configuration)
{
    Configuration = configuration;
}

...

public IConfiguration Configuration { get; }

...

public void ConfigureServices(IServiceCollection services)
{
    ...
    services.AddSpaStaticFiles(configuration =>
    {
        configuration.RootPath = "ClientApp/dist";
    });
    ...
}

...

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    ...
    app.UseSpaStaticFiles();
    ...
}

对此：

public Startup(IHostingEnvironment env, IConfiguration configuration)
{
    HostingEnvironment = env;
    Configuration = configuration;
}

...

public IHostingEnvironment HostingEnvironment { get; private set; }
public IConfiguration Configuration { get; }

...

public void ConfigureServices(IServiceCollection services)
{
    ...
    if (HostingEnvironment.IsProduction())
    {
        // In production, the Angular files will be served from this directory
        services.AddSpaStaticFiles(configuration =>
        {
            configuration.RootPath = "ClientApp/dist";
        });
    }
    ...
}

...

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    ...
    if (env.IsProduction())
    {
        app.UseSpaStaticFiles();
    }
    ...
}

但是，此时页面已完全刷新。这是因为默认情况下未启用 HMR。您必须在此处遵循正确的文档：

https://github.com/angular/angular-cli/wiki/stories-configure-hmr

如果 link 出现故障，只需使用查询 configure HMR for angular CLI.

搜索文档即可

提示：如果你需要IE9-11支持，看一下polyfills.ts文件，忽略import 'classlist.js'行，除非你需要它（否则运行 npm install --save classlist.js).

如何获取 Angular TS 文件以在 .Net Core 项目中保存时进行编译和更新？

How do I get an Angular TS file to compile and update on save in a .Net Core project?

asp.net-core-mvc

asp.net-core

angular-cli

asp.net-core-2.0