asp.net - Angular-CLI .NET Core 中的index.html 是如何调用的？

Question

我使用 Visual Studio 2017 构建了 Angular-CLI .Net Core SPA

dotnet new angular -o my-new-app 

我正在努力寻找的是在写入时默认如何调用位于 ClientApp/src 文件夹中的 index.html 。

http://localhost:57782

startup.cs文件内容如下:

using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.SpaServices.AngularCli;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;

namespace angular_cli
{
    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();

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

        // 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();
            }
            else
            {
                app.UseExceptionHandler("/Home/Error");
            }

            app.UseStaticFiles();
            app.UseSpaStaticFiles();

            //app.UseMvc(routes =>
            //{
            //    routes.MapRoute(
            //        name: "default",
            //        template: "{controller}/{action=Index}/{id?}");
            //});

            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");
                }
            });
        }
    }
}

我故意禁用了 MVC 中间件，一切正常。但是，我不知道通过哪种机制和设置调用index.html...请问有什么好的解释吗？

Answer 1

所以我有完全相同的问题，但对于React App(我猜对于Angular来说非常相似)。我花了过去 2 个小时来调查事情在幕后是如何工作的，我仍然不太确定我是否正确，但这就是我发现的:

开发

spa.UseReactDevelopmentServer(npmScript: "start");

1. 此方法运行名为 start 的 npmScript - 您可以在 scripts 部分的 package.json 文件中找到它。该脚本开始WebPackDevServer它在内存中执行 webpack 管道，然后也从内存中提供生成的文件(它允许在浏览器中快速重新加载文件，而无需重建应用程序，这对于开发非常有用)。

Webpack 管道生成必要的 js 和 css 脚本，将这些文件的链接注入(inject)到 index.html 中，然后将所有必要的文件复制到指定目录(或本例中的内存;))

它设置了该服务器的代理，以便 ASP 将所有请求传递到该服务器，最终您的文件仅从内存中提供。

<小时/>

您还可以直接从控制台运行此服务器并指示 ASP 设置现有服务器的代理，而无需启动 npm 脚本。可以通过使用UseProxyToSpaDevelopmentServer方法来实现。

生产

在生产构建的情况下，不会(也不应该)使用服务器。应该调用 build 脚本(通过您可以在 csproj 文件中找到的 PublishRunWebpack 步骤)，该脚本将运行类似的管道，该管道将生成缩小的文件和将index.html放入指定文件夹中。然后，由于 AddSpaStaticFiles 配置，这些文件将直接从 HDD 提供。

至少这是我目前对这个过程的理解。