Need to fix routing issue with Angular 2 running on an Azure App service

Question

I have an angular 2 website that is based on the Angular 2 "Tour of Heroes" Quick Start.

It works fine when running locally. After fixing things to no longer use local node_modules (per the deployment steps from the quick start) and deploying to the Azure web app the app works fine if I start at the root URL ("/"). However, using Angular routing the URL changes (to "/home" for example) and if I do an F5 refresh of that URL, the app fails to load. When I do that I get a 404 with:

The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.

I tried using a web.config as described here but that did not help. It definitely seems like it is an IIS issue where it tries to serve up a page instead of starting with index.html. My routes are defined in Angular and they work locally.

I am not very clear about the scenario of *"the app works fine except when I try to load the app from a URL other than "/" "*. As Angular 2 is a SPA framework, normally, there is only one entry point (e.g. `index.html`) for the app. — Aaron Chen, Feb 20 '17 at 08:42
Have you seen [this post](http://stackoverflow.com/questions/38823595/angular2-page-refresh-404ing-when-hosted-in-azure)? As the answer point out, you'd need to setup `HashLocationStrategy` to fix this. — Aaron Chen, Feb 20 '17 at 15:14
Thanks for pointing that out @AaronChen-MSFT. I may resort to the HashLocationStrategy. I'm seeing others mention using rewrite rules in the web.config (as I already referenced, but also as the post you link to mentions). I'm not giving up on web.config yet as it seems like the appropriate approach, but I'm missing something if it is. — Kirk Liemohn, Feb 20 '17 at 18:32

score 21 · Answer 1 · answered Mar 18 '17 at 09:15

21

Can you try this web.config file

<configuration>
    <system.webServer>
         <rewrite>
            <rules>
              <rule name="AngularJS Routes" 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>
          <caching enabled="true" enableKernelCache="true">
              <profiles>
                  <add extension=".js" policy="DisableCache" kernelCachePolicy="DisableCache" />
              </profiles>
          </caching>
    </system.webServer>
</configuration>

answered Mar 18 '17 at 09:15

bipin patel

2,061
1
13
22

Yes, it's the rewrite section of the config that will fix that problem. – Elferone Aug 25 '17 at 16:38
1

Works perfectly. This should be marked as the correct answer – nthaxis Nov 15 '18 at 21:28
1

Worked perfectly for me as well. – Leaky Jul 25 '19 at 08:12
1

Can confirm December 2019 this fixed the issue well. – Vault Dweller Dec 13 '19 at 18:18
1

Use my lazy fingers to log in just to tell u in April 2020 this is still working – Phuc Vuong Apr 12 '20 at 13:14

score 0 · Answer 2 · answered Mar 11 '19 at 08:37

The web.config solution did not work for me at all. After a day or so of digging around and tearing my hair out, I came across this post which resolved the issue for me. It appears to be doing something similar in that for a 404 that isn't related to any /api/ request, serve up the root page, whereupon the Angular routing should kick in and serve up the correct view. As per the link above, in Startup.cs at the beginning of the void Configure() method, I inserted the following code:

    app.Use(async (HttpContext context, Func<Task> next) =>
    {
      await next.Invoke();

      if (context.Response.StatusCode == 404 && !context.Request.Path.Value.Contains("/api"))
      {
          context.Request.Path = new PathString("/");
          await next.Invoke();
      }
   });

The only thing I've done differently is set the root url to '/' (my root razor page that's hosting the Angular app) instead of index.html in the example. The versions I'm using are .NET Core 2.2 and Angular 7.2.1.

score 0 · Answer 3 · answered Mar 07 '21 at 14:18

0

Add this file in src/assets/routes.json

 {
  "routes": [
    {
      "route": "/*",
      "serve": "/index.html",
      "statusCode": 200
    }
  ]
}

let me know if it workes ?

answered Mar 07 '21 at 14:18

Anzar Alim

47
8

score 0 · Answer 4 · answered Aug 11 '21 at 04:11

0

Not sure if it's too late, but here is what you need

app-routing.module.ts add useHash: true
modify your navigation to use #
compile your application: ng build --configuration production
upload your files to your static site

answered Aug 11 '21 at 04:11

Sebastian Castaldi

8,580
3
32
24

Need to fix routing issue with Angular 2 running on an Azure App service

4 Answers4

Linked