平均堆栈：刷新或输入直接 URL 会导致“无法 GET/”？

Question

我使用 MEAN 堆栈创建了一个网页。角 5。

我遇到的一个问题是我无法输入直接 url 路径。例如，如果我最后输入 /home，我会收到此错误消息“无法获取 /home”。当我也点击刷新时会发生这种情况。如果我从主页单击“主页”导航按钮，该页面运行良好。

例如： 这是我的页面：https://nameless-hollows-54410.herokuapp.com/

当我转到直接链接时，https://nameless-hollows-54410.herokuapp.com/home

页面已损坏。为什么会这样？

我的应用路由代码：

const routes: Routes  = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent},
];

我的导航栏：

<li class="nav-item active">
   <a class="nav-link" routerLink="/home">Home
       <span class="sr-only">(current)</span>
   </a>
</li>

Answer 1

让我解释一些事情。

这不是前端问题。当您通过单击链接从您的角度应用程序中调用“/home”时，它工作正常。因为你的 Angular 应用知道路线。

但在直接调用'my-site-address/home'时，它试图找到'/home' 在您的节点应用程序中。由于您的节点应用程序中没有“/home”路由，因此这是一条死胡同。

所以问题是当你直接调用'my-site-address/home'时，'/home' 不到达前端路由，而是尝试通过节点应用程序路由。

要解决问题，对于每条路线，从您的节点应用程序，您必须 加载构建文件（对于角度可能是'index.html'）。

为此，请确保您的节点应用针对任何未知路由加载 index.html(angular build) 文件。

你在 node js 路由中的代码应该是这样的。

app.use('*', (req, res, next) => {
    res.sendFile(path.join(__dirname, 'angular build file path'));
});

将路由放在路由器的最后一部分。

另外，用角度构建文件路径替换“角度构建文件路径”，在您的情况下可能是“index.html 文件路径”。

您也可以查看source code（关注第78行和项目结构）。