Angular 在本地工作的远程服务器上路由失败

Question

我有一个非常简单的项目，具有以下路由。

const routes: Routes = [
  { path: "start", component: StartComponent },
  { path: "sub01", component: Sub01Component },
  { path: "", redirectTo: "/start", pathMatch: "full" },
  { path: "**", component: StartComponent }
];

当我运行在本地使用 ng serve 并浏览到 localhost:4200 时，我可以看到起始页面的内容和 URL 被重写为 localhost:4200/start，正如预期的那样。然后，我通过 ng build 制作了一个半定稿，并放在我的 IIS 上的 dist 目录中。浏览到应用程序的地址会产生与上述相同的结果。我还可以确认浏览到例如图片的 URLs 也产生了预期的结果。

正如我注意到的，不同之处在于，在本地，它可以重新加载页面（即浏览到 localhost:4200/start），而在远程上的相同操作失败，给我 404（因此无法浏览 http://address.that-worked-just.now/start）。由于我可以访问其他 URL 而不仅仅是根，所以在我看来，它只是路由不起作用。

我对这种行为感到有点吃惊，不确定如何进一步诊断它。我知道的唯一区别是在本地，我使用默认的 Angular CLI 为应用程序提供服务，而在远程，我有 IIS 服务 index.html 包含脚本。所以我认为，一旦向客户生成了文档，其他所有事情都发生在客户身上。（该应用程序真的很有限，没有与服务器的交互，没有服务等，因为它基本上是一个登陆页面，至少现在是这样）。

我是否遗漏了应该在任何配置文件中声明的内容？还是由于某些防火墙策略等原因可能会发生奇怪的不当行为？我不确定如何确定这一点，我宁愿假设我做了一些愚蠢的事情而不是责怪服务器团队。综上所述，还可以推断出什么？

Answer 1

IIS 有自己的路由系统。所以当我们在 IIS 中托管 Angular 时，Angular 路由将失败，因为 IIS 不理解 Angular 路由并且会寻找与路由匹配的资源并且它给你404 错误。

要解决此问题，您可以尝试以下解决方案之一：

使用IIS URL重写规则设置路由：

<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>
  </rewrite>
</system.webServer>

来源：https://angular.io/guide/deployment#fallback-configuration-examples

另一种方法是添加404的错误页面重定向到/index.html.

Angular 在本地工作的远程服务器上路由失败

Angular routing fails on remote server working locally

iis

routes

angular-routing

angular

angular9