How to manage HTML5 route fallback with parameter for Angular SPA with ASP.NET Core in Startup.cs?

Question

I was searching, but did not manage finding any answer, maybe here someone smart knows what to do. I have Angular SPA, with ASP.NET Core back-end. In Angular I dont want to use Hash Bang Routes. But I have no idea how to configure routing, to be able to refresh or enter a SPA component page with a parameter. For example: somewebsite.com/a5eccbd9 //where a5eccbd9 is a parameter.

Examples closest to my problem, but routing just to index.html of the SPA.

https://stackoverflow.com/a/61275033

https://weblog.west-wind.com/posts/2017/aug/07/handling-html5-client-route-fallbacks-in-aspnet-core#Letting-ASP.NET-Core-Handle-Client-Side-Routes

https://weblog.west-wind.com/posts/2020/Jul/12/Handling-SPA-Fallback-Paths-in-a-Generic-ASPNET-Core-Server#handling-fallbacks-with-built-in-endpoints-and-route-processing

But after being routed to the file, what next to do with parameter and being redirected to the correct component? My Angular routing:

const routes: Routes = [
...
  {
    path: '',
    component: FormComponent,
  },
  {
    path: ':id',
    component: FormComponent,
  },
...
];

And in index.html I have: <base href="/" />

And in my dead end I have no idea how to make back-end redirecting me properly.

score 2 · Accepted Answer · answered Jun 03 '21 at 19:00

Actually fallback routing for the Angular was easier than I expected. In the back-end I just needed to add end-point mapping:

app.UseEndpoints(endpoints =>
            {
                endpoints.MapControllers();
                endpoints.MapFallbackToFile("/{id}", "/index.html"); //<- added
                endpoints.MapFallbackToFile("/", "/index.html");
            });

And from now on after GET request: somewebsite.com/a5eccbd9 ASP.NET Core redirects it to the Angular SPA's index.html, and over there Angular's routing deal with that oryginal request by its own routing path: ':id',.

I was also considering solution from here: Angular2: How to access index.html querystring in App Component where from ASP.NET Core I wanted to redirect it to: index.html?id={id}, and in main app component to catch id, but Angular appeared to be smarter than I expected.

danielsantoso · Answer 2 · 2021-06-03T07:04:49.827

1

Try this:

const routes: Routes = [
...
  {
    path: '',
    component: FormComponent,
  },
  {
    path: '/:id',
    component: FormComponent,
  },
...
];

In your component.ts, you can get the id by call use this on ngOnInit method :

import { ActivatedRoute } from '@angular/router';

constructor(
    private route: ActivatedRoute
  ) { }
  
ngOnInit() {
  const id = this.route.snapshot.params.id);
}

edited Jun 03 '21 at 07:04

answered Jun 03 '21 at 06:57

danielsantoso

9
2

Thank you for the tip, but already I am using `this.route.snapshot.params.id`, and with `path: '/:id',` I receive an error: `Invalid configuration of route '/:id': path cannot start with a slash`. Anyway, the main problem is that on SPA **fallback** the client looses the rooting and I just receive **404**. – bakunet Jun 03 '21 at 07:59
sorry, still use ':id', that's correct, and then to get the id value, just use this.route.snapshot.params.id. It should work :) – danielsantoso Jun 03 '21 at 09:38

How to manage HTML5 route fallback with parameter for Angular SPA with ASP.NET Core in Startup.cs?

2 Answers2