Angular 5 条路由在部署后不起作用

Question

在我的 Angular 5 应用程序中，我已经通过 ng serve 在本地运行并且一切正常。然后我做了 ng build -prod 并将 dist 文件夹上传到我的网络服务器。

主页打开并显示正常，但我尝试去的任何路线都导致 404 错误。我不知道如何 debug/fix 这个。

Answer 1

首先，如上所述，您需要确保在应用程序内部使用 [routerLink] 指令进行路由。使用 hrefs 基本上是告诉您的浏览器导航到新路线，结果将向服务器发出页面请求并呈现新内容（这就是您获得404，该路由在服务器上不存在，它正被您的 Angular 应用程序解释。

[routerLink] 指令有效地更新应用程序内部的路由，同时更新浏览器的导航历史记录，而无需实际获取新页面。在我们讨论 push state 策略时，较旧的应用程序实际上使用 hashbang 策略... (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"
      }
    ]
  }
}

Answer 2

解决方法是使用 routerLink 而不是 href。

例子

 <a routerLink="/home" class="item-button">Link 1</a> <br/>

Answer 3

在您的应用程序根目录中，创建一个包含以下内容的文件 "Staticfile"：

推送状态：已启用

将此推送到您的部署中，您应该能够直接从地址栏访问您的链接。

例如：如果您的源目录是 "src"，那么您的文件应该位于此文件夹中：即 "src/Staticfile"。请注意，"Staticfile" 不是目录，而是文件名。

Answer 4

我在使用 Firebase 托管时遇到了同样的问题。我发现在将应用程序部署到 Firebase 时，您需要对“配置为单页应用程序（将所有网址重写为 /index.html）？”回答“是”。问题，解决了问题。

Angular 5 条路由在部署后不起作用

Angular 5 routes don't work after deployment

angular-routing

angular

angular5