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提供角度服务时，我尝试导航到任何未经授权的页面，例如：http://localhost:4200/anyPage或http://localhost:4200/query，然后重定向到登录页面或authGuardI。已创建。

这是我想要的行为-任何用户如何尝试导航到我的应用程序的查询部分并且未通过authGuard，将被重定向到登录页面，并且所有丢失并输入错误信息的用户网址，将被重定向回基础页面。

问题出在哪里？

当我通过express为我的应用程序提供服务时，只有在输入根URL http://localhost:PORT并提供基本页面后，它才起作用。

当我尝试导航至任何其他URL时，例如：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时都会出错）未在快递中定义）？

难道快递无法处理某些导航吗？

如果表达“仅知道”以导航到用角度的基本URL，那么用角度定义路由的意义何在？当我以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);

在ExpressJS中提供应用程序时不应用角度应用程序导航

1 个答案: