在Azure中托管具有路由的Angular2应用程序

Question

我正在使用角度cli在Angular 2中开发一个应用程序.该应用程序工作正常,并在我在Azure中部署它时运行正常,但路由不起作用.我可以通过"myapp.azurewebsites.net"访问我的应用程序,但如果我尝试"myapp.azurewebsites.net/settings",我会收到404错误.我找到了许多指南,有很多不同的方法可以让不同的服务器将所有内容路由到一个索引文件,但根本没有.就像提供web.config文件,配置节点或快速服务器,以及两者同时一样.

所以,我的问题包括两部分.
1. Azure中哪种Web应用程序模板最适合托管Angular2应用程序？
它只是用Angular2编写的单页面应用程序.不是ASP.NET MVC应用程序中包含的那种.

2.如何配置该Web应用程序以使用我在Angular中配置的路由

Answer 1

1. Azure中哪种Web应用程序模板最适合托管Angular2应用程序？

我们一直在Azure上使用标准Azure"Web App"模板托管我们的ng2站点,因为它只是一个可用于提供静态资源的基本IIS站点模板.(没有使用节点或明确的解决方案.)根据您的解释,这应该足够了.

2. 如何配置该Web应用程序以使用我在Angular中配置的路由？

作为部署的一部分,此Web.Config将FTP到站点的根目录(/site/wwwroot- index.html所在的位置)与其余的构建工件:

<?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>

这基本上使用RegEx将所有请求路由回index.html(或根,如果您愿意),除了我正在使用的静态资源(.js,.css,.png等)

同样的警告适用于我原来的答案.

更新:长网址/ OAuth

将建议的更改应用于web.config后,Kristoffer(OP)遇到此OAuth解决方案的问题,其中OAuth返回查询字符串长度超过Azure的默认允许长度,并且仍然返回以下400错误:

此请求的查询字符串的长度超过配置的maxQueryStringLength值.

通过添加和添加到web.config,Kristoffer能够使用此StackOverflow应答中提供的解决方案来增加请求限制.他更新的web.config可以在Gist" Azure Web应用程序的配置文件中找到,以支持带有路由的angular2应用程序和用于auth令牌的长URL. ",下面提供了完整性.<requestLimits maxQueryString="32768"/><httpRuntime maxQueryStringLength="32768" maxUrlLength="65536"/>

<?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>