Angular2 PreRendering not working correctly when base href set to subdirectory #649

New Issue

fergalmoran · 2025-08-09T17:17:06Z

fergalmoran commented

2025-08-09 17:17:06 +00:00

Originally created by @alterius on 6/21/2017

I'm trying to make PreRendering work with an Angular2 app based in a subdirectory.

Steps to recreate:

Created a new project from the Microsoft SPA Templates dotnet new angular -n DashboardTest (dotnet new --install Microsoft.AspNetCore.SpaTemplates::* to install the templates package)
Removed all routing from Startup.cs and replaced with app.UseMvc();. This means that only routes I've explicitly defined will be mapped.
Added [Route("/dashboard/{*angularRoute}")] attribute to the Index() action on the HomeController to catch all requests to my chosen subdirectory of /dashboard and pre-render the angular app (the Home/Index view already contains <app asp-prerender-module="ClientApp/dist/main-server">Loading...</app> for pre-rendering.)
Updated the base href tag in _Layout.cshtml to <base href="/dashboard" /> to correctly configure the angular app to treat /dashboard as it's root.

On the surface everything appears to work beautifully, however behind the scenes the pre-rendering has broken. To prove this, load view-source:http://localhost:5000/dashboard/counter (in Chrome) - you'll see the rendered output is actually the /home route, not the /counter route as expected.

Suggested fix:
Add public string BaseHref { get; set; } and unencodedPathAndQuery = !string.IsNullOrEmpty(BaseHref) && unencodedPathAndQuery.StartsWith(BaseHref) ? unencodedPathAndQuery.Substring(BaseHref.Length) : unencodedPathAndQuery; to PrerenderTagHelper

*Originally created by @alterius on 6/21/2017* I'm trying to make PreRendering work with an Angular2 app based in a subdirectory. Steps to recreate: 1. Created a new project from the Microsoft SPA Templates `dotnet new angular -n DashboardTest` (`dotnet new --install Microsoft.AspNetCore.SpaTemplates::*` to install the templates package) 2. Removed all routing from `Startup.cs` and replaced with `app.UseMvc();`. This means that only routes I've explicitly defined will be mapped. 3. Added `[Route("/dashboard/{*angularRoute}")]` attribute to the `Index()` action on the `HomeController` to catch all requests to my chosen subdirectory of /dashboard and pre-render the angular app (the `Home/Index` view already contains `<app asp-prerender-module="ClientApp/dist/main-server">Loading...</app>` for pre-rendering.) 4. Updated the base href tag in `_Layout.cshtml `to `<base href="/dashboard" />` to correctly configure the angular app to treat `/dashboard` as it's root. On the surface everything appears to work beautifully, however behind the scenes the pre-rendering has broken. To prove this, load `view-source:http://localhost:5000/dashboard/counter` (in Chrome) - you'll see the rendered output is actually the `/home` route, not the `/counter` route as expected. Suggested fix: Add `public string BaseHref { get; set; }` and `unencodedPathAndQuery = !string.IsNullOrEmpty(BaseHref) && unencodedPathAndQuery.StartsWith(BaseHref) ? unencodedPathAndQuery.Substring(BaseHref.Length) : unencodedPathAndQuery;` to `PrerenderTagHelper`

fergalmoran closed this issue

2025-08-09 17:17:06 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github/JavaScriptServices#649