'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 |
|---|
