Angular+Express生产环境刷新页面报Cannot GET /start问题排查

这个问题是典型的Angular单页应用(SPA)在生产环境刷新路由时的404问题，根源在于客户端路由和服务端路由的逻辑不匹配：

问题原因 #

Angular的路由是客户端路由，正常加载页面时，浏览器先请求根路径/，服务器返回index.html，之后的页面跳转都是Angular在客户端内部处理，不会向服务器发起新请求。但当你主动刷新/start这类路径时，浏览器会直接向服务器发送GET /start的请求，而你的Express服务器目前只配置了静态文件托管，没有处理这类非API的路由请求，所以返回了Cannot GET /start的错误。

解决方案 #

你需要在Express的配置中添加一个回退路由，让所有非API的请求都返回Angular的index.html，这样Angular就能接管客户端路由的处理逻辑了。修改你的server代码中的config方法：

private config(): void {
  this.app.use(cors());
  this.app.use(bodyParser.json());
  this.app.use(bodyParser.urlencoded({ extended: false }));
  
  if (this.app.get('env') === 'production') {
    // 加载Angular静态文件
    this.app.use(express.static(path.join(__dirname, '/../client')));
    
    // 添加回退路由：所有非API请求返回index.html
    this.app.get('*', (req, res) => {
      res.sendFile(path.join(__dirname, '/../client/index.html'));
    });
  }
}

关键注意点 #

• 务必把这个回退路由放在所有API路由之后（也就是this.route.routes(this.app)调用完成后再添加），这样才不会影响正常API接口的请求处理。
• 确认path.join(__dirname, '/../client/index.html')的路径正确性，根据你的应用结构，这个路径是能正确指向dist/client下的index.html文件的，如果后续调整了打包目录，记得同步修改路径层级。

修改完成后，再执行npm run build和npm run start:prod，刷新/start或其他Angular客户端路由页面时，服务器会返回index.html，Angular会自动解析当前路径并加载对应组件，页面就能正常显示了。

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