Host Angular2 app with routing in Azure

Question

I'm developing an app in Angular 2 using the angular cli. The app works fine, and runs ok when I deploy it in Azure, but the routing doesn't work. I can access my app via "myapp.azurewebsites.net", but if I try "myapp.azurewebsites.net/settings" I get an 404 error. I have found a lot of guides with a lot of different ways to make different servers route everything to one index-file, but none have worked, at all. Like providing an web.config file, configuring node or express server, and both at the same time.

So, my question consists of two parts.
1. What kind of web app template in Azure is best suited for hosting an Angular2 application?
It's just a single page application written in Angular2. Not the kind that is wrapped in an ASP.NET MVC application.

2. How do I configure that web app to use the routing I have configured in Angular

Answer 1

1. What kind of web app template in Azure is best suited for hosting an Angular2 application?

We've been hosting our ng2 sites on Azure in a standard Azure "Web App" template as it is just a basic IIS site template that can be used to serve static resources. (No node or express solutions used.) From what you explained, this should be sufficient.

2. How do I configure that web app to use the routing I have configured in Angular?

As part of the deployment, this Web.Config is FTP'd to the sites' root directory (/site/wwwroot -- where the index.html is located) with the rest of the build artifacts:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="AngularJS" stopProcessing="true">
          <match url="^(?!.*(.bundle.js|.bundle.map|.bundle.js.gz|.bundle.css|.bundle.css.gz|.png|.jpg|.ico)).*$" />
          <conditions logicalGrouping="MatchAll">
          </conditions>
          <action type="Rewrite" url="/"  appendQueryString="true" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

This basically uses a RegEx to route all requests back to index.html (or root, if you prefer), except for the static resources that I'm using (.js, .css, .png, etc.)

Same caveats apply from my original answer.

Update: Long URLs/OAuth

Upon applying the suggested changes to the web.config, Kristoffer (The OP) encountered an issue with this OAuth solution where the OAuth return query string length exceeded Azure's default allowed length and was still returning the following 400 error:

The length of the query string for this request exceeds the configured maxQueryStringLength value.

Kristoffer was able to increase the request limit using the solution provided in this StackOverflow answer by adding <requestLimits maxQueryString="32768"/> and <httpRuntime maxQueryStringLength="32768" maxUrlLength="65536"/> to the web.config. His updated web.config can be found in the Gist "Configuration file for Azure web app to support angular2 applications with routing and long urls for auth tokens.", and is provided below for completeness.

<?xml version="1.0" encoding="utf-8"?>
<configuration>
    <system.web>
        <httpRuntime maxQueryStringLength="32768" maxUrlLength="65536"/>
    </system.web>
    <system.webServer>
        <security>
            <requestFiltering>
                <requestLimits maxQueryString="32768"/>
            </requestFiltering>
        </security>
        <rewrite>
            <rules>
                <rule name="AngularJS" stopProcessing="true">
                    <match url="^(?!.*(.bundle.js|.bundle.map|.bundle.js.gz|.bundle.css|.bundle.css.gz|.png|.jpg|.ico)).*$" />
                    <conditions logicalGrouping="MatchAll"></conditions>
                    <action type="Rewrite" url="/" appendQueryString="true" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>