angular - 如何将 SPA 嵌入 ASP.NET Core 库并从路径提供服务

Question

场景

我想构建一个 包含 小型 SPA 前端的 aspnetcore 库/模块。 IE。 html/js/css 文件应与 dll 一起提供。SPA 应从特定路径提供服务，即 /some-module(不需要可配置)。SPA 由多个 html/js/css 文件组成，让我们假设以下文件:

/my-module/index.html
/my-module/index.js
/my-module/index.css

这些 url 应该只是文件服务器。所有其他路径，例如

/my-module/
/my-module/page-1
/my-module/page-2

应该提供 index.html，以便客户端路由可以处理请求。

我有一个部分解决方案，其中提供 SPA 文件。但是我不知道如何使所有其他子路径即 /my-module/* (不包括文件)返回 index.html。

使用嵌入式文件和 UseFileServer 的部分解决方案:

假设 SPA 构建文件位于 /my-library/web/build/。以下 csproj 使用 GenerateEmbeddedFilesManifest 和 EmbeddedResource 将这些文件嵌入到 dll 中:

我的模块.csproj

<Project Sdk="Microsoft.NET.Sdk">

  <PropertyGroup>
    <TargetFramework>netcoreapp2.2</TargetFramework>
    <GenerateEmbeddedFilesManifest>true</GenerateEmbeddedFilesManifest>
    <SpaRoot>web\</SpaRoot>
    <DefaultItemExcludes>$(DefaultItemExcludes);$(SpaRoot)node_modules\**</DefaultItemExcludes>
  </PropertyGroup>

  <ItemGroup>
    <Folder Include="web\" />
  </ItemGroup>

  <ItemGroup>
    <EmbeddedResource Include="web\build\**" />
  </ItemGroup>

  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.SpaServices.Extensions" Version="2.2.0" />
    <PackageReference Include="Microsoft.Extensions.FileProviders.Embedded" Version="2.2.0" />
    <PackageReference Include="Microsoft.AspNetCore.StaticFiles" Version="2.2.0" />
  </ItemGroup>

</Project>

以下中间件配置使用 ManifestEmbeddedFileProvider 为这些嵌入式文件提供服务:

        public static void UseMyModuleUi(this IApplicationBuilder app)
        {
            app.UseFileServer(new FileServerOptions
            {
                RequestPath = "/my-module",
                FileProvider = new ManifestEmbeddedFileProvider(
                    assembly: Assembly.GetAssembly(typeof(ServiceExtensions)), "web/build")
            });
        }

在一些引用我的模块的 aspnetcore 应用程序中调用 UseMyModuleUi 扩展方法，这确实为下面的文件提供服务/我的模块/index.html/我的模块/index.js/my-module/index.css

甚至 /my-module/ 服务于 my-module/index.html。

但是 /my-module/ 下的所有其他路径(例如 my-module/page-1)不提供 index.html。 #

我尝试过的替代方案

我尝试使用 UseSpaStaticFiles 或 UseStaticFiles 和 Map 的一些组合，但是没有很好的结果。

我正在构建的项目可在此处获得:https://github.com/jannikbuschke/ef-configuration-providerui 项目是嵌入 SPA 的库。 示例 项目是宿主应用程序。

Answer 1

以下应该适合您:

    public static void UseMyModuleUi(this IApplicationBuilder app)
    {
        app.Map("/my-module", builder => 
        {
            var provider = new ManifestEmbeddedFileProvider(
                assembly: Assembly.GetAssembly(typeof(ServiceExtensions)), "web/build"); 
            builder.UseStaticFiles(new StaticFileOptions 
            {
                FileProvider = provider
            });
            builder.Run(async context =>
            {
                await context.Response.SendFileAsync(provider.GetFileInfo("index.html"));
            });
        });
    }

1. Map 定义了一个新分支，当请求以给定路径开始并从该分支中​​删除该路径段时，该分支将被执行。
2. 静态文件提供程序将匹配 ManifestEmbeddedFileProvider 中存在的每个文件
3. 为了为每个不匹配的请求提供 index.html，Run 定义了一个始终返回给定文件的委托(delegate)。这就是这个分支的所谓包罗万象。