在 expressjs 中提供应用程序时，Angular 应用程序导航不适用

Question

我有一个 Angular 7 应用程序，它是基于 expressjs 的服务器。

服务端的app服务部分是这样的：

app.get('/', (req, res) => {
   console.log(`sending...`);
   res.sendFile(path.join(__dirname, 'index.html'));
});

这很简单：当我导航到 localhost:PORT 时，我得到了 Angular 应用程序的基本页面，这是一个登录页面。

Angular的路由是这样的：

const routes: Routes = [
{ path: '', component: LoginComponent},
{ path: 'query', component: QueryComponent, canActivate:[AuthGuard] },
{ path: '**', pathMatch:'full', redirectTo: '' }
];

当我通过 ng serve 提供 Angular 服务时，我尝试导航到任何未经授权的页面，例如：http://localhost:4200/anyPage 或 http://localhost:4200/query，然后我被重定向到登录页面或我创建的 authGuard。

这是我想要的行为 - 任何用户如何尝试导航到我的应用程序的查询部分并且不通过 authGuard，将被重定向到登录页面，任何用户丢失并进入一个奇怪的url，将被重定向回基本页面。

哪里出了问题？

当我使用 express 服务我的应用程序时，它仅在我输入根 URL 时才有效：http://localhost:PORT，并且我得到了我的基本页面。

当我尝试导航到任何其他网址时，例如：http://locahost:PORT/query 或 http://localhostPORT/anyPage，我收到 GET 错误：Cannot GET /query。

当我通过 expressjs 提供 Angular 时，如何进行路由？ 我读了This answer regarding nagular routes and nodejs route，我必须问： 解决我的问题的唯一方法是在 angular 中为每个页面定义 authGuard，以便 nodejs/express 将始终重定向到 angular 的基本页面，并且 angular 必须从那里处理所有内容（并且每当我尝试导航到任何 url 时都会出错没有在 express 中定义）？

难道有些导航不能通过express处理吗？

如果表达“知道”仅以角度导航到基本网址，那么在角度定义路由有什么意义？当我在 Angular 中定义的路由，例如：path:'/query' 生效？

Answer 1

您必须使用app.get('*') 将所有请求定向到index.html。这也将引导静态资产，因此您必须添加app.use()：

const app = express();
app.use(express.static(__dirname + '/dist'));

app.get('*', (req, res) => {
  console.log(`sending...`);
  res.sendFile(path.join(__dirname, 'index.html'));
});

app.listen(port);