Angular 7部署Express.js时路由导航失效问题及相关咨询

首先，咱们得先搞清楚问题根源：Angular是单页应用（SPA），它的路由是客户端路由——也就是说，正常在应用内导航时，页面跳转是Angular在浏览器端完成的，不会向服务器发请求。但如果用户直接在地址栏输入非根路径（比如/query）或者刷新页面，浏览器会直接向Express发送GET /query的请求，而你的Express目前只配置了根路径/的处理，自然会返回Cannot GET /query。

核心解决方案：让Express接管所有页面请求，返回Angular首页 #

你需要修改Express的代码，让它对所有非API/静态资源的GET请求，都返回Angular的index.html，这样Angular就能加载并接管客户端路由了。步骤如下：

1. 先配置静态文件服务，让Express能正确返回Angular打包后的JS、CSS等资源：

// 假设你的Angular打包后的文件在dist/your-app-name目录下
app.use(express.static(path.join(__dirname, 'dist/your-app-name')));

2. 替换原来的根路径路由，改成通配路由处理所有页面请求：

// 所有GET请求都返回index.html，让Angular处理路由
app.get('*', (req, res) => {
  console.log(`sending app for path: ${req.path}`);
  res.sendFile(path.join(__dirname, 'dist/your-app-name/index.html'));
});

这样配置后，不管用户访问/query还是/anyPage，Express都会返回Angular首页，然后Angular会根据URL匹配自己的路由规则，要么触发AuthGuard拦截，要么重定向到登录页，和你用ng serve时的行为一致。

解答你的几个疑问 #

1. 是否只能让Express始终返回首页，由Angular处理所有路由？ #

没错，这是SPA部署的标准模式，但这并不影响你用Express处理其他业务：

• Angular的AuthGuard仍然需要保留，它负责客户端的页面权限校验（比如判断用户是否登录，未登录就重定向到登录页）。
• Express可以单独处理API接口（比如/api/login、/api/get-data），只需要把这些API路由放在通配路由之前定义，这样Express会优先处理API请求，剩下的页面请求才交给Angular。

2. 有没有办法让Express处理部分导航？ #

当然可以！比如你想让某些路径由Express直接返回静态页面或处理特殊逻辑，只需要在通配路由之前定义这些路由即可：

// 先定义Express要处理的路由
app.get('/server-page', (req, res) => {
  res.sendFile(path.join(__dirname, 'static/server-page.html'));
});

// 再定义API路由
app.get('/api/user-info', (req, res) => {
  res.json({name: 'test', role: 'admin'});
});

// 最后定义通配路由，交给Angular处理
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist/your-app-name/index.html'));
});

这样访问/server-page时，Express会直接返回对应的静态页面；访问/api/user-info时返回接口数据；其他路径则交给Angular处理路由。

3. Angular路由的意义何在？什么时候生效？ #

Angular路由的核心价值是客户端无刷新导航：

• 当用户在Angular应用内点击导航链接（比如从登录页跳转到/query），Angular会直接在浏览器端切换组件，不需要向Express发请求，体验更流畅。
• 只有当用户直接在地址栏输入路径、刷新页面，或者从外部链接进入时，才会触发Express的请求，这时候Express返回首页，Angular再根据URL匹配路由规则，加载对应的组件。

简单说：Angular路由在应用内导航时直接生效；外部访问/刷新时，先经过Express返回首页，再由Angular路由接管。

内容的提问来源于stack exchange，提问作者yishain11