Mean Stack：刷新或输入直接 URL 导致 'Cannot GET/'？

Question

我使用 MEAN 堆栈创建了一个网页。 Angular5.

我遇到的一个问题是我无法进入直接 url 路径。例如，如果我最后输入 /home，我会收到此错误消息 "Cannot GET /home"。当我也点击刷新时会发生这种情况。如果我从我的主页上单击 '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

让我解释几件事。

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

但是在直接调用'my-site-address/home'时，它试图找到'[=37的路由=]/home' 在您的节点应用程序中。由于你的节点应用程序中没有'/home'路由，所以这是一个死胡同。

所以问题是当你直接调用'my-site-address/home'时，'/home'没有到达前端路由，而是试图通过节点应用进行路由。

To solve the problem, for each route, from your node app, you have to load the build file(for angular maybe it is 'index.html').

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

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

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

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

此外，将 'angular build file path' 替换为 angular 构建文件路径，在您的情况下可能 'index.html file path'.

您还可以检查source code（重点关注第 78 行和项目结构）。

Mean Stack: Refreshing or entering a direct URL lead to 'Cannot GET/'?