Question

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

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

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

Answer 1

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

我们已经在Azure上使用标准的Azure＆＃34; Web App＆＃34;托管我们的ng2站点。模板，因为它只是一个基本的IIS站点模板，可用于提供静态资源。（没有使用节点或明确的解决方案。）根据您的解释，这应该足够了。

如何配置该网络应用以使用我在Angular中配置的路由？

作为部署的一部分，这个Web.Config是FTP到网站＆＃39;根目录（/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（或root，如果您愿意），除了我使用的静态资源（.js，.css，.png等）。）

同样的警告适用于我的original answer。

更新：长网址/ OAuth

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

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

Kristoffer通过将<requestLimits maxQueryString="32768"/>和<httpRuntime maxQueryStringLength="32768" maxUrlLength="65536"/>添加到web.config，使用this StackOverflow answer中提供的解决方案增加了请求限制。他更新的web.config可以在Gist＆＃34; Configuration file for Azure web app to support angular2 applications with routing and long urls for auth tokens.＆＃34;中找到，并在下面提供完整性。

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

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

1 个答案: