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.

bakunet · Accepted Answer · 2021-06-03 19:00:51Z

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 · Accepted Answer · 2021-06-03 07:04:49Z

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 3, 2021 at 7:04

answered Jun 3, 2021 at 6:57

danielsantoso

92 bronze badges

2 Comments

bakunet Over a year ago

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.

danielsantoso Over a year ago

sorry, still use ':id', that's correct, and then to get the id value, just use this.route.snapshot.params.id. It should work :)

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related