Question

因此，我在{。{3}}

上使用.Net Core在Angular CLI上观看了第9频道的视频。

在位置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 Core（带有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

因此，正确的术语是“热模块更换”（MHR-AKA“实时重新加载”或“热更新/重新加载”）。遵循此答案后，我就可以进入其中了：

https://stackoverflow.com/a/50934814/1236397

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

这两个链接似乎都暗示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

如果链接断开，只需使用查询configure HMR for angular CLI搜索文档。

提示：如果需要IE9-11支持，请查看polyfills.ts文件，并忽略import 'classlist.js'行，除非需要它（否则运行npm install --save classlist.js）。 / p>

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

1 个答案: