Question

我使用Visual Studio 2017（版本15.7.2）创建一个.Net Core 2.1 Angular应用程序

我想知道spa.UseAngularCliServer（）如何在开发模式下提供页面。

在调试模式下，尽管网页已正常加载，但ClientApp或wwwroot文件夹中没有“ dist”文件夹。 dist文件夹在哪里？
看来，spa中间件启动了angular-cli dev服务器，但该网页实际上是由IIS Express托管的。 “ ng服务”与IIS Express有何关系？

形成starup.cs

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

尽管这是通过将请求代理到Angular Development Server来完成的，但是代理不是由IIS代理的，而是由ASP.NET Core本身代理的。 IIS不了解Angular Dev Server侦听的端口。

UseAngularCliServer("start")首先将调用命令
```
npm start -- --port {dynamic_port}
```

此处的{dynamic_port}是在RunTime处计算的。由于npm中已经配置了package.json命令，它将由{{1} }。

如果ng serve -- --port {dynamic_port}正常运行，它将为代理创建纯ng serve并使用它执行代理（将请求与纯HttpClient一起转发到Angular Dev Server，并且复制响应作为自己的响应）。 HttpClient代理将以类似的方式发生。

您可以在GitHub上找到源代码。很容易阅读和理解。

在内部，WebSocket将调用AngularCliMiddleware来执行UseAngularCliServer(npmScript: "start")和step 1。步骤1通过以下方式完成：

step 2

var angularCliServerInfoTask = StartAngularCliServerAsync(sourcePath, npmScriptName, logger);方法将找到一个可用的TCP端口，并运行命令StartAngularCliServerAsync以启动npm start -- --port {port}：

ng serve

See the complete code here

第2步是通过：

private static async Task<AngularCliServerInfo> StartAngularCliServerAsync(
    string sourcePath, string npmScriptName, ILogger logger)
{
    var portNumber = TcpPortFinder.FindAvailablePort();
    logger.LogInformation($"Starting @angular/cli on port {portNumber}...");
    var npmScriptRunner = new NpmScriptRunner( sourcePath, npmScriptName, $"--port {portNumber}", null); 
    // ...
}

可以here找到public static void UseProxyToSpaDevelopmentServer(this ISpaBuilder spaBuilder, Func<Task<Uri>> baseUriTaskFactory) { // ... // Proxy all requests to the SPA development server applicationBuilder.Use(async (context, next) => { var didProxyRequest = await SpaProxy.PerformProxyRequest( context, neverTimeOutHttpClient, baseUriTaskFactory(), applicationStoppingToken, proxy404s: true); }); }的实现。对于普通请求，它只需使用普通的PerfromProxyRequest()转发它们，然后将响应复制为自己的响应即可。

回到您的问题：

dist文件夹在哪里？

自从您配置了HttpClient：

spa.UseAngularCliServer("start")

所有这些请求将由angular cli启动的本地开发服务器处理。结果，磁盘上根本没有if (env.IsDevelopment()) { spa.UseAngularCliServer(npmScript: "start"); }。如果您手动运行命令dist，也会发生同样的情况。

“ ng服务”与IIS Express有何关系？

IIS不了解Angular Dev Server侦听的端口。当收到传入消息时，IIS会将其发送到您的ASP.NET Core服务器。如果该请求不能被static ng serve之前配置的staticFiles，MVC或任何其他中间件处理，则ASP.NET Core会将其转发到Dev Server。

Answer 2

不需要dist文件夹，因为这些文件是由Angular CLI内部使用的webpack开发服务器构建并保存在内存中的。
对SPA的请求被IIS反向代理到Angular Dev Server。因此IIS收到来自浏览器的请求-> IIS将请求发送到angular开发服务器->开发服务器将数据发送回IIS-> IIS将数据发送到浏览器。

spa.UseAngularCliServer（）中间件如何服务网页？

2 个答案: