Routing in Angular 7 running in subfolder not working correctly

Question

We are working on migrating our application to a new Angular version. The old one (Angular.JS) was it\'s own application/repo being served by an .NET Framework 4.5.2 ASP.NET

Answer 1

The reason why it would always route back to the v1 url is because the angular 7 app contained a web.config file that looked like this:

I believe this is default for an IIS deployment and a team member might have added this. I never thought about having a web.config in a front-end project.

Basically, this rule takes care of rerouting the user to the index.html. For example www.website.com/folder would normally bring the user to a folder called folder on the webserver, but this is not where Angular runs and could cause a 404. This rule brings the user back to www.website.com and then lets angular route the folder part.

Because I am running my application in a subfolder, I changed the url="/" to url="/v2/" and it worked immediatly!

Remember to build the project with ng build --configuration=dev --deploy-url=/v2/ --base-href=/v2/! The deploy-url is needed because the scripts/css/other files are not found in the root folder of the server; it is found in /v2/. The base-href is necessary for the router; it should start routing the application at www.website.com/v2/ and not at www.website.com/!

No other iis rewrite rules are necessary, no asp.net config, no special angular routing. Just these simple steps!