'ASP.NET serving angular app and deployUrl is deprecated

I have an ASP.NET app (.NET 6.0), and I have a route /ngxapp which serves my angular 13 app. The angular app is copied to wwwroot/ngxapp folder (see below how it's built).

I've been using this .NET code for years to deliver angular app:

    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();
        });

It allows to open angular app even when user requests for some non-root angular route (for example, https://<domain>.com/ngxapp/someroute-1/subroute/etc). Basically, everything works like a charm.

Now, when I build an angular app I've always used --deploy-url=/ngxapp/ param, like so (from windows batch .cmd file):

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

The latest version of angular compiler shows me the warning about deployUrl:

Option "deployUrl" is deprecated: Use "baseHref" option, "APP_BASE_HREF" DI token or a combination of both instead. For more information, see https://angular.io/guide/deployment#the-deploy-url.

I read the docs on APP_BASE_HREF and built angular app without --deploy-url parameter. Also, used 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() {}
}

But now, when I run ASP.NET app with the angular app in place (opening https://localhost/ngxapp in the browser), the requests of all .js files are empty and their MIME type is text/html. Basically, they're not found.

If I return back to using deploy-url parameter in the angular build, everything works!

What am I missing here?

Comes down to this

When --deploy-url is used, the request Url is correct:

https://localhost:44389/ngxapp/filename.js because the script block contains correct url's:

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

When --deploy-url is not used, ngxapp part is missing:

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

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


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source