需要修复在 Azure 应用服务上运行的 Angular 2 的路由问题

本文介绍了需要修复在 Azure 应用服务上运行的 Angular 2 的路由问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

限时送ChatGPT账号..

我有一个基于 Angular 2 "Tour of Heroes" Quick 的 angular 2 网站开始.

在本地运行时效果很好.在修复不再使用本地 node_modules 之后(根据 部署步骤来自快速入门)并部署到 Azure Web 应用程序，如果我从根 URL(/")开始，该应用程序可以正常工作.但是，使用 Angular 路由 URL 更改(例如更改为/home")，如果我对该 URL 执行 F5 刷新，应用程序将无法加载.当我这样做时，我会得到一个 404:

<块引用>

您要查找的资源已被删除、更名或暂时不可用.

我尝试使用 web.config 所述此处 但这并没有帮助.它似乎是一个 IIS 问题，它试图提供一个页面而不是从 index.html 开始.我的路由是在 Angular 中定义的，它们在本地工作.

解决方案

你能试试这个 web.config 文件吗

<预><代码><配置><system.webServer><重写><规则><规则名称="AngularJS 路由" stopProcessing="true"><match url=".*"/><conditions logicalGrouping="MatchAll"><add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true"/><add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true"/></条件><action type="重写" url="/"/></规则></规则></rewrite><缓存启用="true" enableKernelCache="true"><个人资料><add extension=".js" policy="DisableCache" kernelCachePolicy="DisableCache"/></个人资料></缓存></system.webServer></配置>

I have an angular 2 website that is based on the Angular 2 "Tour of Heroes" Quick Start.

It works fine when running locally. After fixing things to no longer use local node_modules (per the deployment steps from the quick start) and deploying to the Azure web app the app works fine if I start at the root URL ("/"). However, using Angular routing the URL changes (to "/home" for example) and if I do an F5 refresh of that URL, the app fails to load. When I do that I get a 404 with:

The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.

I tried using a web.config as described here but that did not help. It definitely seems like it is an IIS issue where it tries to serve up a page instead of starting with index.html. My routes are defined in Angular and they work locally.

解决方案

Can you try this web.config file

<configuration>
    <system.webServer>
         <rewrite>
            <rules>
              <rule name="AngularJS Routes" stopProcessing="true">
                <match url=".*" />
                <conditions logicalGrouping="MatchAll">
                  <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                  <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                </conditions>
                <action type="Rewrite" url="/" />
              </rule>
            </rules>
          </rewrite>
          <caching enabled="true" enableKernelCache="true">
              <profiles>
                  <add extension=".js" policy="DisableCache" kernelCachePolicy="DisableCache" />
              </profiles>
          </caching>
    </system.webServer>
</configuration>

这篇关于需要修复在 Azure 应用服务上运行的 Angular 2 的路由问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！