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

Question

我正在使用 angular cli 在 Angular 2 中开发应用程序。该应用程序运行良好，当我在 Azure 中部署它时运行正常，但路由不起作用。我可以通过 "myapp.azurewebsites.net" 访问我的应用程序，但如果我尝试 "myapp.azurewebsites.net/settings"，我会收到 404 错误。我找到了很多指南，其中有很多不同的方法可以使不同的服务器将所有内容路由到一个索引文件，但是 none 根本没有用。就像同时提供 web.config file, configuring or express 服务器一样。

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

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

中配置的路由

Answer 1

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

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

How do I configure that web app to use the routing I have configured in 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（或 root，如果你愿意的话），除了我正在使用的静态资源（.js，.css , .png 等）

同样适用于我的。

更新：长URLs/OAuth

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

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

Kristoffer 能够使用 this Whosebug 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." 中提供的解决方案提高请求限制，并在下面提供以确保完整性。

<?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 应用程序

Host Angular2 app with routing in Azure

azure

azure-web-app-service

angular2-routing

angular