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

Question

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

服务于服务器部分的应用程序是这样的：

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时，它才能工作，并且我得到了我的基本页面。

当我尝试导航到任何其他url时，比如：http://locahost:PORT/query或http://localhostPORT/anyPage，我会得到一个get错误：Cannot GET /query。

当我通过expressjs服务时，我如何使angular的路由发生？我读过这个关于nagular路由和nodejs路由的答案，我必须问：解决我的问题的唯一方法是为angular中的每个页面定义authGuard，这样nodejs/express就会一直重定向到angular的基页，angular必须从那里处理所有内容(每当我试图导航到任何未在express中定义的url时都会出错)？

难道没有办法让一些导航用特快专递吗？

如果express"知道"只能导航到angular中的基本url，那么在angular中定义路由有什么意义？当我在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);