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

分享于2022年12月29日 angular asp.net 问答
【问题标题】:ASP.NET serving angular app and deployUrl is deprecated服务于角度应用程序和 deployUrl 的 ASP.NET 已弃用
【发布时间】:2022-12-22 02:19:59
【问题描述】:

我有一个 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 {"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:


当不使用 --deploy-url 时, 应用程式 部分缺失:

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


  • 可能就像将 %folder% var 从 /ngxapp/ 更改为 /nxgapp 一样简单?
  • 你什么意思?它的价值不会改变
  • @alvipeo,你解决了这个问题吗?我今天遇到了完全相同的问题。
  • 不,我现在仍然使用 --deploy-url。顺便说一句,我刚刚查看了文档 angular.io/guide/deployment#the-deploy-url ,它并没有说它已被弃用。
  • 我相信 Abdus 有正确的解决方案。您需要确保服务页面的头部包含 。然后相对链接将相对于该基础并且链接应该有效。

【解决方案1】:

你可以使用这个命令

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

【讨论】: