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:

<configuration>
    <system.webServer>
      <rewrite>
        <rules>
          <rule name="Angular" stopProcessing="true">
            <match url=".*" />
            <conditions logicalGrouping="MatchAll">
              <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
              <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
            </conditions>
            <action type="Rewrite" url="/" />
          </rule>
        </rules>
      </rewrite>
    </system.webServer>
</configuration>

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!

Answer 2

1. Remove your Web.Config IIS rewrite rules
2. In your RouteConfig change it this way

RouteConfig

public class RouteConfig
{
    public static void RegisterRoutes(RouteCollection routes)
    {
        routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

        // don't change the arrangement, this must be executed first
        routes.MapRoute(
                name: "V2",
                url: "v2/{*url}",
                defaults: new { controller = "Home", action = "IndexV2", id = UrlParameter.Optional }
            );

        routes.MapRoute(
                name: "Default",
                url: "{*url}",
                defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
            );
        }
 }

Basically what this does is it will catch all your route paths given with the specific route name, the {*url} catches all the route segment regardless of the value.

So when we say the url is;

• localhost:4200/test <- this points to Default
• localhost:4200/v2/test <- this points to V2
• localhost:4200/test/something/2323 <- this points to Default
• localhost:4200/v2/test2/test_again/2323 <- this points to V2

and in your HomeController make sure to add the IndexV2

HomeController

public ActionResult IndexV2()
{
    return View();
} 

Answer 3

Have you made any modification to your Web.config file? You need to set it up for the base angular app (using the UrlRewrite module) I'd assume it might need a modification for your use case...

<rewrite>
    <rules>
      <rule name="Angular RoutesV1" stopProcessing="true">
        <match url=".*" />
        <conditions logicalGrouping="MatchAll">
          <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
          <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
        </conditions>
        <action type="Rewrite" url="/my/app/" />
      </rule>
    </rules>
  </rewrite>

My assumption is you will need to add another 'rule' here. Hope this helps!!! (note: the rewrite is supposed to match your ng build base href value)