服务于角度应用程序和 deployUrl 的 ASP.NET 已弃用

Question

我有一个 ASP.NET 应用程序 (.NET 6.0)，并且我有一条路由 /ngxapp 为我的 angular 13 应用程序提供服务。 Angular 应用程序被复制到 wwwroot/ngxapp 文件夹（见下文它是如何构建的）。

多年来我一直在使用这个 .NET 代码来交付有角度的应用程序：

    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }
        else
        {
            app.UseExceptionHandler("/Error");
            // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
            app.UseHsts();

            // this is for reverse proxy (NGINX)
            app.UseForwardedHeaders(new()
            {
                ForwardedHeaders = ForwardedHeaders.XForwardedFor | ForwardedHeaders.XForwardedProto
            });
        }

        app.UseHttpsRedirection();

        // this must be before the next (angular) section, otherwise 404's are not handled
        app.UseStatusCodePagesWithReExecute($"{ANGULAR_APP_ROUTE_S}/404");

        app.Use(async (context, next) =>
        {
            RewriteXFrameOptionsHeader(context);

            await next();

            RedirectEmptyRootToAngularApp(context, ANGULAR_APP_ROUTE_S);

            await RewriteAssets(context, next);

            await RedirectForAngular(context, next, ANGULAR_APP_ROUTE_S);
        });

        app.UseDefaultFiles(new DefaultFilesOptions {DefaultFileNames = new List<string> {"index.html"}});

        app.UseStaticFiles();

        app.UseRouting();

        app.UseAuthentication();
        app.UseAuthorization();

        app.UseEndpoints(endpoints =>
        {
            endpoints.MapControllers();
            endpoints.MapRazorPages();
        });

即使用户请求某些非根角度路径（例如，https://<domain>.com/ngxapp/someroute-1/subroute/etc），它也允许打开角度应用程序。基本上，一切都像一个魅力。

现在，当我构建一个角度应用程序时，我总是使用 --deploy-url=/ngxapp/ 参数，就像这样（来自 Windows 批处理 .cmd 文件）：

call ng build --base-href /%folder% --deploy-url /%folder%/ --configuration=production

最新版本的角度编译器向我显示了关于deployUrl的警告：

选项“deployUrl”已弃用：使用“baseHref”选项、“APP_BASE_HREF”DI 令牌或两者的组合。有关详细信息，请参阅https://angular.io/guide/deployment#the-deploy-url。

我阅读了APP_BASE_HREF 上的文档并构建了 Angular 应用程序没有--deploy-url范围。另外，使用APP_BASE_HREF：

@NgModule({
   declarations: [AppComponent, CreateUrlComponent, NotAuthorizedComponent, FormFocusDirective],
   imports: [
      BrowserModule,
      AppRoutingModule,
      BrowserAnimationsModule,
      ...
   ],
   providers: [
      { provide: APP_BASE_HREF, useValue: environment.baseHref }, // baseHref = "/ngxapp"
      { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }
   ],
   bootstrap: [AppComponent]
})
export class AppModule {
   constructor() {}
}

但是现在，当我运行带有角度应用程序的 ASP.NET 应用程序时（在浏览器中打开https://localhost/ngxapp），所有的请求.js文件为空，其 MIME 类型为 text/html。基本上，他们是找不到的。

如果我返回到在角度构建中使用 deploy-url 参数，一切正常！

我在这里错过了什么？

归结为这个

使用--deploy-url时，请求的Url是正确的：

https://localhost:44389/ngxapp/filename.js because the 脚本块包含正确的 url：

<script src="/ngxapp/runtime.js" type="module"></script>

当不使用--deploy-url时，应用程式部分缺失：

https://localhost:44389/filename.js and the script block is:

<script src="runtime.js" type="module"></script>

Answer 1

你可以使用这个命令

ng build --prod --output-path dist --base-href /ngxapp/

Answer 2

我成功了。以下是我希望角度部分在 ASP.NET 应用程序中工作的方式：

如果我在我的 ASP.NET 应用程序中有一个名为 /ngxapp 的角度应用程序的特殊路径，我想要任何包含“/ngxapp”部分的链接可以无缝工作。例如，如果用户将 https://example.com/ngxapp/child/subchild 粘贴到浏览器地址，并且 Angular 应用程序确实有 child/subchild 路由，那么 ASP.NET 应用程序应该服务于 https://example.com/ngxapp/index.html 并且 Angular 路由器接管并服务于 child/subchild。

问题是当 ASP.NET 从 /ngxapp 为 Angular 的应用程序 index.html 提供服务时，索引文件中的脚本标记必须具有与 wwwroot/ngxapp/ 文件夹相关的有效路径（scr='/ngxapp/some-angular-file.js，而不仅仅是 src='/some-angular-file.js'）。这在使用 --deploy-url 标志时有效。

现在，当标志被弃用时，我不得不在 ASP.NET 中创建一个重写规则，它实际上捕获从 angular app 文件夹提供的任何文件，并将其重写为相应的正确路径：从 /whatever-angular-file.js 到 `/ngxapp/whatever-angular -文件.js'。

有了这个规则，一切都按预期工作，并且不需要--deploy-url。