Chrome back button does not work MVC app to spa(Angular + API)

Question

My application consists with two parts MVC and Angular + API, i have issue with back button on the browser when trying to navigate back from MVC part to the SPA . For example

i navigate to the main page of my application https://localhost:5001/en-us(SPA. Angular + API) and from that page i navigate to the following page https://localhost:5001/en-us/blog(MVC) , and when i press back button on chrome the url got updated on the browser but no page actually refreshed, i mean it does not go back to the main site.

Note: Back button is working as expected in scope of MVC or SPA scope. For example if i navigate from https://localhost:5001/en-us/blog to the https://localhost:5001/en-us/blog/Articles/1 and after that presss back button it will work as expected, and the same for SPA part. The problem only with mvc app back to spa app.

Answer 1

Since the url of the MVC app is underneath the Angular app, Angular is probably presuming that it has to render those pages as well.

Is it an option to use another base url for Angular? Or use HashLocationStrategy to let the routing use # inside the app? Please refer to https://angular.io/guide/router#locationstrategy-and-browser-url-styles