Angular 角形5条路线不'；部署后无法工作

在Angular 5应用程序中，我通过

ng serve

在本地运行，一切都运行得很好。于是我做了

ngbuild-prod

，并将dist文件夹上传到我的web服务器

---

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

因此，首先，如上所述，您需要确保在应用程序内部使用

[routerLink]

指令进行路由。使用

href

s基本上是告诉浏览器导航到一个新的路由，结果将向服务器请求页面并呈现新内容（这就是为什么您要获得

404

，该路由在服务器上不存在，只是由您的应用程序解释）

[routerLink]

指令有效地更新了应用程序内部的路由，同时更新了浏览器的导航历史记录，而没有实际获取新页面。在我们讨论推送状态时，较旧的应用程序实际上使用了

hashbang

策略。。。（）

不管怎样，就像@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"
      }
    ]
  }
}

---

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

范例

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

链接1

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

pushstate:已启用

在部署中按此按钮，您应该能够直接从地址栏访问链接

---

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

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

您使用的是

href

s还是

[routerLink]

s导航到您的路线？我正在查看的是href。但即使直接在浏览器中键入URL也不起作用。好的，将href更改为routerLink修复了该部分。但是我也需要能够直接在地址栏中输入URL。你必须配置你的服务器。这样，您就可以为每一个404请求提供

index.html

。因为您的服务器不知道客户端路由。一旦您的服务器在404上提供

index.html

，angular将负责路由。我告诉IIS将状态404重定向到/。当然，我不再得到404，但现在我在控制台中得到一个错误，它是

error-TypeError:Assignment to constant variable.

。如果我不使用

-prod

标志构建，则可以正常工作。这可能是您的应用程序现在的一个更大的问题。我不确定你是否可以分享你的代码。但是如果不知道更多，我就无法提供更多的帮助，我想是的，但我不知道该去哪里查找，因为它出现在我现在访问的任何页面上，并且在本地实例中不会发生。可能相关=>如果更糟的情况变得更糟（这可能是一种痛苦），我会查看所有

const

变量，或者可以用一根过梁来查看

常量

在哪里被重新分配/取消分配或其他什么。谢谢！这正是问题所在。我更新到1.7.3，现在它没有给出那个错误。当你在Angular应用程序中时，它可以正常工作。。。但是如果你随后部署代码并尝试使用它（例如“），它会抛出一个404错误。请提供更多详细信息。在angular应用程序或服务器的根目录中？链接到一些文档？@YosiLeibman，我编辑了我的回复。我希望它现在更有意义。谢谢你的评论。