- 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.
- 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>
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…