在Azure上托管带有路由的Angular2应用程序

Question

在Azure上托管带有路由的Angular2应用程序

angularazureazure-web-app-serviceangular2-routing

7

我正在使用angular cli开发一个Angular 2应用程序。应用程序运行良好，在Azure中部署后也可以正常运行，但路由不起作用。我可以通过“myapp.azurewebsites.net”访问我的应用程序，但是如果我尝试“myapp.azurewebsites.net/settings”，就会出现404错误。我找到了很多指南，有很多不同的方法可以使不同的服务器将所有内容路由到一个索引文件，但没有一个方法能够奏效。比如提供一个web.config文件、配置node或express服务器，以及同时使用两者。

因此，我的问题分为两个部分。
1. Azure中哪种Web应用程序模板最适合托管Angular2应用程序？
这只是一个使用Angular2编写的单页面应用程序。不是包含在ASP.NET MVC应用程序中的那种。

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

- Kristoffer Berge

Windows Azure网站运行IIS。您可以在web.config中使用重写模块将所有未知的URL移动到index.html或/。https://dev59.com/wmcs5IYBdhLWcg3wu2fS - yurzui

是的，我已经尝试添加一个与那个完全相同的web.config文件，但似乎没有任何作用。我在我的问题中链接了一个类似的解决方案。 - Kristoffer Berge

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Steve Gomez · Accepted Answer

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

我们一直在Azure上使用标准的Azure“Web App”模板托管我们的ng2站点，因为它只是一个基本的IIS网站模板，可用于提供静态资源。（没有使用任何node或express解决方案。）根据您所解释的内容，这应该已经足够了。

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

这基本上使用正则表达式将所有请求路由回到index.html（或者如果您喜欢，根目录），除了我正在使用的静态资源（.js、.css、.png等）。

与我的原始答案相同的警告适用。

更新：长URL / OAuth

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

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

Kristoffer能够使用这个StackOverflow答案中提供的方法通过向web.config添加<requestLimits maxQueryString="32768"/>和<httpRuntime maxQueryStringLength="32768" maxUrlLength="65536"/>来增加请求限制。他更新的web.config可以在"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>