在Azure中托管使用​​路由的Angular2应用程序

我正在使用角度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中配置的路由

---

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

我们一直在标准Azure“Web应用程序”模板中将Azure上的ng2站点托管在Azure中，因为它只是一个可用于提供静态资源的基本IIS站点模板。 （没有使用节点或明确的解决方案。）从你的解释中，这应该是足够的。

如何配置该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>

除了我使用的静态资源（.js，.css，.png等）之外，这基本上使用RegEx将所有请求路由回index.html（或根，如果您愿意）

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

更新：长URL / OAuth

在将建议的更改应用于web.config时，Kristoffer（The OP）遇到了此OAuth解决方案的问题，其中OAuth返回查询字符串长度超过了Azure的默认允许长度，并且仍然返回以下400错误：

此请求的查询字符串长度超出了配置的maxQueryStringLength值。

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

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

链接地址: http://www.djcxy.com/p/42035.html

上一篇: Host Angular2 app with routing in Azure

下一篇: New Asp.Net MVC5 project produces an infinite loop to login page