问题描述
限时送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屋!
更多推荐
[db:关键词]
发布评论