如何让Express Router在Angular 5中正常工作？MEAN栈项目求助

看起来你遇到的问题主要是路由匹配顺序和Angular 5构建产物路径的变化导致的，我们一步步来解决：

问题核心分析 #

你的Express配置里，app.get('*', ...)是一个通配路由，它会捕获所有未被之前路由匹配到的GET请求——包括根路径/。所以当你访问http://localhost:3000/时，这个路由会优先返回Angular的index.html，而不是你期望的API响应。另外，Angular CLI 5和Angular 4的构建产物结构有个小变化，也可能导致路径匹配问题。

解决方案1：访问正确的API路径 #

如果你原本的需求是测试API是否正常工作，其实直接访问http://localhost:3000/api就能看到api works的响应——因为你已经把API路由挂载到了/api路径下，这个路由会优先于通配路由被匹配到。

解决方案2：让根路径返回API内容 #

如果确实需要根路径/返回API的响应，你需要调整Express的路由顺序，把根路径的API路由放在通配路由之前：

修改你的index.js，在app.use('/api', api);之后添加根路径的处理路由：

app.use('/api', api);

// 添加根路径API路由
app.get('/', function(req, res) {
  res.send('api works');
});

// 通配路由放在最后
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist/index.html'));
});

这样根路径的请求会被专门的API路由捕获，而其他路径（比如Angular的前端路由）依然会被通配路由处理，返回Angular页面。

解决方案3：修正Angular 5构建产物路径 #

Angular CLI 5之后，ng build默认会把构建产物放在dist/你的项目名称子目录下（而Angular 4是直接放在dist根目录）。你需要检查你的dist目录结构：

• 如果index.html在dist/your-project-name/index.html，那你需要修改Express里的静态文件路径和通配路由的文件路径：

// 替换your-project-name为你的实际项目名称
app.use(express.static(path.join(__dirname, 'dist/your-project-name')));

// ...其他中间件配置...

app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist/your-project-name/index.html'));
});

这个路径错误也可能导致你误以为API不工作，但其实是Angular页面加载异常的问题。

你可以先试试第一种方案，访问/api路径确认API是否正常，再根据实际需求调整路由或者路径配置。

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