Mean Stack：刷新或输入直接 URL 会导致“无法获取/”？

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

让我解释几件事。

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

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

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

为了解决这个问题，对于每个路由，从你的节点应用程序，你必须加载构建文件（对于 angular 来说，它可能是“index.html”）。

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

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

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

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

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

您还可以查看源代码（重点关注第 78 行和项目结构）。