在我的 Angular 5 应用程序中,我一直通过 ng serve
在本地运行,一切都运行良好。然后我执行了 ng build -prod
并将 dist 文件夹上传到我的网络服务器。
主页打开并正确显示,但我尝试去的任何路由都导致 404 错误。我不知道如何调试/修复此问题。
最佳答案
首先,如上所述,您需要确保使用 [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"
}
]
}
}
关于部署后 Angular 5 路由不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50648762/