Question

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

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

Answer 1

首先，如上所述，您需要确保在应用内部使用[routerLink]指令进行路由。使用href s基本上是告诉您的浏览器导航到新路由，因此将向服务器请求页面并呈现新内容（这就是为什么你得到了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"
      }
    ]
  }
}

Answer 2

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

示例

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

Answer 3

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

推送状态：启用

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

Answer 4

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

部署后，Angular 5路由不起作用

4 个答案: