Angular 和 WebAPI 配置

Angular and WebAPI configuration

我们有一个 Angular 4 应用程序和一个 WebAPI 应用程序 (.NET Framework)。我们设置了一个 Azure 应用程序,其中部署了两个应用程序(客户端和服务)。根路径指向客户端。

我们 API (/api/{controller}/) 的 HTTP 请求没有到达我们的服务,看起来 Angular 路由正在接收它们并且返回 index.html 作为响应内容。

我们如何设置 Azure,以便我们的 Angular 应用程序提供 HTML/CSS/JS 内容以及任何对“/api/”的调用路由到我们的服务?

我们已尝试让根路径指向服务,但随后我们收到所有非 API 请求的 404。

为了回答我自己的问题,我需要按照本文所述提供静态文件:

https://mirkomaggioni.com/2016/09/11/owin-middleware-for-static-files/

简而言之,我将服务 (WebAPI) 部署到 Azure 根目录,并将客户端 (Angular 4) 部署为已编译的 "dist" 文件夹。

我添加了以下 NuGet 包:

<package id="Owin" version="1.0" targetFramework="net452" />
<package id="Microsoft.Owin" version="3.1.0" targetFramework="net462" />
<package id="Microsoft.Owin.FileSystems" version="3.1.0" targetFramework="net462" />
<package id="Microsoft.Owin.Host.SystemWeb" version="3.1.0" targetFramework="net462" />
<package id="Microsoft.Owin.StaticFiles" version="3.1.0" targetFramework="net462" />

然后创建了一个如下所示的 OWIN Startup class:

public class Startup
{
    public void Configuration(IAppBuilder app)
    {
        var physicalFileSystem = new PhysicalFileSystem(@"./dist");
        var options = new FileServerOptions
        {
            EnableDefaultFiles = true,
            FileSystem = physicalFileSystem
        };
        options.StaticFileOptions.FileSystem = physicalFileSystem;
        options.StaticFileOptions.ServeUnknownFileTypes = true;
        options.DefaultFilesOptions.DefaultFileNames = new[]
        {
            "index.html"
        };

        app.UseFileServer(options);
    }
}