IIS 在我的 Angular 应用程序路由上给出 404 - File or directory not found 错误答案

【问题标题】：IIS is giving 404 - File or directory not found error on my Angular application routeIIS 在我的 Angular 应用程序路由上给出 404 - File or directory not found 错误
【发布时间】：2019-08-08 10:38:44
【问题描述】：

我已经部署了以前运行良好的 Angular 应用程序，但是当我将应用程序的内部组件放到根模块并尝试从应用程序顶部访问它时，它会在 IIS 上引发此错误。

这是我的 Angular 路由文件：

export const routes: Routes = [
  { path: 'enable-cookies', component: EnableCookiesComponent },
  { path: 'not-found', component: NotFoundComponent },
  { path: 'lock-screen', component: LockScreenComponent, canLoad: 
    [RestrictPathGuard] },
  { path: 'booking-detail/:id/:id2', loadChildren: 
     './public/public.module#PublicModule'},
  { path: '', loadChildren: 'app/components/pages.module#PagesModule', 
    canActivate: [UserProtectionGuard] },
  { path: '**', redirectTo: 'not-found' }
  ];

在上述路线中，路径 booking-detail/:id/:id2 给了我 404 错误，其他路径工作正常。

我在下面的 web.config 中也有我的 url 重写文件：

<?xml version="1.0" encoding="utf-8"?>
<configuration>

 <system.webServer>
  <rewrite>
  <rules>
   <rule name="Angular 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="./index.html" />
  </rule>
</rules>

我有什么遗漏或做得不对吗？

以下是我正在尝试访问的网址。

http://10.1.1.1:7070/booking-detail/MTk2NnwxMDR8U0VBfEdVRVNU/Dm9duQS%2fI%2fZSLdXyQTyLVZUNRjuTxRjXhGUxecdVifZh%2fhk6cWKIH6chi5pQgr6e3HQ296gGFgRE%2fkpFoW95YgsFCWQuSdeKk79iPFi9RW1RFQfZ4Zr%2fQYZ40r0q%2bzBuDZmVrrxU39Ayn9nGP5%2fNbD7219uff8K5cwsTYkhqxNDjbfZ5SHcPiPXvdyRkDnFpXzsmNq0TjOAPIBqsRkVilmFCWI6tYCxx4brwKO7Acy1EE8TD3p9U6BS%2fZLhZikFkiAhHUKVw8ImLGhctp5TDfg3BIYHMQ7Rj4BEYnEEdpxxRP%2fgB3g%2bvRB4l8sCgJSCc4SVrQIb68lXttzfyEDLLJIzmCVdRDoCnRUqRMuJWSzXQ5m0vcvEhP1p%2bpdSp7OwJQag82YlO%2fv0lIkrSvrMih4auBjEv64%2fFJfYJ7dK%2fGOmBHuh5ET7du13kpKql7k39LrRR4BkzQS4cCswuD8PS6w%3d%3d

这里是PublicModule的路由

export const routes: Routes = [
{
    path: '',
    component: PublicComponent,
    children: [
        { path: '', component: ViewBookingComponent},
    ]
}

];

【问题讨论】：

你的 index.html 中有吗？
@SGalea 是的，我的 index.html 标签中有那个标签
能把PublicModule的路由加到问题里吗？我认为这不是 IIS 问题，因为您设法在之前部署了它，但是 rewrite 应该是 url="/" 和 base href='/' 您的问题与路由有关。
@SGalea 我添加了公共模块路由
我已经用这种路由结构进行了测试，它正在工作，但我没有看到自己的想法。我的建议是添加一个按钮，看看通过角度路由与 URL 直接访问是否有效。还要在文本编辑器中打开已部署的 web.config 和 index.html，如果您正在使用某些部署自动化，请查看它是否是您打算部署的内容。（永远不能太确定）

标签： angular iis

【解决方案1】：

替换

 <action type="Rewrite" url="./index.html" />

与

 <action type="Rewrite" url="/" />

【讨论】：

您是否在某个 url 下的某个子文件夹中进行部署？
是的，我正在一个名为 UI 的子文件夹下进行部署。
这是在您部署之前工作还是仅在 localhost 上工作？网址不应超过 255 个字符。但是您遇到的问题仍然与此无关。
是的，它之前工作正常，但是当我添加另一个模块到预订详细信息的路线时，它开始在该特定路线上给出错误，但在其他路线上它仍然工作正常

【解决方案2】：

我在chrome 中遇到了同样的错误，但后来我尝试在firefox 中打开它，实际错误是iis 被配置为禁用双转义序列，因此我将配置请求过滤设置为允许双重转义

<security>
            <requestFiltering allowDoubleEscaping="true" />
</security>

然后它可以工作，但请注意此解决方案将添加的security holes

【讨论】：

【解决方案3】：

对于 IIS，在 Web.config 中添加重写规则。

只需将 Web.config 放在应用程序的根文件夹中即可。

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="AngularRewrite" 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>
  </system.webServer>
</configuration>

如果您不幸无法添加该 Web.config，请使用 HashLocationStrategy 作为最后的手段。

https://angular.io/api/common/HashLocationStrategy#example

【讨论】：