Bookmarked URLs and MapSpaFallbackRoute when templatePrefix is non-empty #863

New Issue

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

fergalmoran commented

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

Originally created by @RaviDesai on 4/2/2017

This may not actually be a bug - it may be expected behavior, but I was hoping someone might be able to explain to me why this is, or if there is a work-around.

I deploy my web site to a non-root location (Default Web Site\MyServer), and use MapSpaFallbackRoute to map requests to a single angular controller. I was hoping that a bookmarked route (like: localhost/MyServer/fetch-data) would work to route me directly to the proper angular controller in my app. When the app is rooted to "/" (instead of "/MyServer"), that does work, but when the app is rooted to /MyServer the bookmark just delivers a 404 error.

If I try to go to the top of the site http://localhost/MyServer, I'll get the home page, and can route properly (by following internal links) to any controller from inside my app, I only get the 404 if I try to load http://localhost/MyServer/fetch-data initially.

I've placed some of my relevant code below, in case it is related to some misconfiguration inside my app:

In _Layout.cshtml I have base href defined inside the <head> tag:

<base href="@Url.Content("~")" />

In Startup I have the following:

app.UseMvc( routes =>
 {
	 routes.MapRoute(
		 name: "default",
		 template: "{controller=Home}/{action=Index}/{id?}");

	routes.MapSpaFallbackRoute(
		name: "spa-fallback",
		templatePrefix: "MyServer",
		defaults: new { controller = "Home", action = "Index" } );
} );

In my app.module.ts:

@NgModule({
	bootstrap: [ AppComponent ],
	declarations: [
		AppComponent,
		NavMenuComponent,
		HomeComponent,
		PageNotFoundComponent
	],
	imports: [
		UniversalModule, 
		FormsModule,
		FetchDataModule,
		RouterModule.forRoot([
			{ path: '', redirectTo: 'home', pathMatch: 'full' },
			{ path: 'home', component: HomeComponent },
			{ path: 'fetch-data', loadChildren: './components/fetchdata/fetchdata.module#FetchDataModule' },
			{ path: '**', component: PageNotFoundComponent }
		])
	],
	providers: [
		[{ provide: APP_BASE_HREF, useValue: "/MyServer" }],
		SECURITY_INFO_PROVIDER,
		RolesService
	]

*Originally created by @RaviDesai on 4/2/2017* This may not actually be a bug - it may be expected behavior, but I was hoping someone might be able to explain to me why this is, or if there is a work-around. I deploy my web site to a non-root location (Default Web Site\MyServer), and use MapSpaFallbackRoute to map requests to a single angular controller. I was hoping that a bookmarked route (like: localhost/MyServer/fetch-data) would work to route me directly to the proper angular controller in my app. When the app is rooted to "/" (instead of "/MyServer"), that does work, but when the app is rooted to /MyServer the bookmark just delivers a 404 error. If I try to go to the top of the site `http://localhost/MyServer`, I'll get the home page, and can route properly (by following internal links) to any controller from inside my app, I only get the 404 if I try to load `http://localhost/MyServer/fetch-data` initially. I've placed some of my relevant code below, in case it is related to some misconfiguration inside my app: In _Layout.cshtml I have base href defined inside the `<head>` tag: ``` <base href="@Url.Content("~")" /> ``` In Startup I have the following: ``` app.UseMvc( routes => { routes.MapRoute( name: "default", template: "{controller=Home}/{action=Index}/{id?}"); routes.MapSpaFallbackRoute( name: "spa-fallback", templatePrefix: "MyServer", defaults: new { controller = "Home", action = "Index" } ); } ); ``` In my app.module.ts: ``` @NgModule({ bootstrap: [ AppComponent ], declarations: [ AppComponent, NavMenuComponent, HomeComponent, PageNotFoundComponent ], imports: [ UniversalModule, FormsModule, FetchDataModule, RouterModule.forRoot([ { path: '', redirectTo: 'home', pathMatch: 'full' }, { path: 'home', component: HomeComponent }, { path: 'fetch-data', loadChildren: './components/fetchdata/fetchdata.module#FetchDataModule' }, { path: '**', component: PageNotFoundComponent } ]) ], providers: [ [{ provide: APP_BASE_HREF, useValue: "/MyServer" }], SECURITY_INFO_PROVIDER, RolesService ] ```

fergalmoran closed this issue

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

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github/JavaScriptServices#863