部署后 Angular 5 路由不起作用

Question

在我的 Angular 5 应用程序中，我一直通过 ng serve 在本地运行，一切都运行良好。然后我执行了 ng build -prod 并将 dist 文件夹上传到我的网络服务器。

主页打开并正确显示，但我尝试去的任何路由都导致 404 错误。我不知道如何调试/修复此问题。

Answer 1

首先，如上所述，您需要确保使用 [routerLink] 指令在应用程序内部进行路由。使用 hrefs 基本上是告诉你的浏览器导航到一个新的路由，结果会向服务器发出页面请求并呈现新内容(这就是为什么你收到 404，该路由在服务器上不存在，它只是由您的 Angular 应用程序解释)。

[routerLink] 指令有效地更新应用程序内部的路由，同时更新浏览器的导航历史记录，而无需实际获取新页面。较旧的应用程序实际上使用 hashbang 策略，而我们正在讨论 push state 策略......(Both discussed here if you're interested in learning more)

无论哪种方式，就像@Ritwick 提到的那样。此时，如果用户从应用程序外部导航到您可以处理的路由，您将希望将所有服务器请求重定向到您的 index.html。正如一些示例片段一样，如果您使用的是 NGINX，您可以执行此路由重定向:

index index.html;

location / {
  try_files $uri $uri/ /index.html;
}

或者如果您使用的是 Firebase 之类的东西，您可以像这样更新您的 firebase.json...

{
  "hosting": {
    "public": "dist", // if your app is in a subfolder of the dist, include that
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}