Angular应用首次加载或刷新时出现404错误求助

• 配置开发服务器 fallback 到 index.html
  Angular是单页应用，刷新时服务器会尝试直接请求对应路径的文件，而非交给Angular路由处理。需要让开发服务器把所有请求都导向index.html：

  • 用Angular CLI的话，修改angular.json的serve配置，添加historyApiFallback: true：

    "architect": {
      "serve": {
        "options": {
          "historyApiFallback": true
        }
      }
    }
    

  • 自定义Express服务器的话，添加兜底路由：

    const express = require('express');
    const app = express();
    app.use(express.static('dist/你的应用名称'));
    // 所有请求返回index.html
    app.get('*', (req, res) => {
      res.sendFile('index.html', { root: 'dist/你的应用名称' });
    });
    app.listen(3000);
    

• 修正base href配置
  不要随意改成./，如果应用部署在服务器根路径，保持<base href="/">即可。如果是子路径部署，比如/demo/，则设置为<base href="/demo/">。也可以通过CLI启动时指定：ng serve --base-href /，确保开发环境的base href匹配服务器路径。

• 补充路由兜底规则
  在路由模块里添加通配符路由，让Angular接管未知路径的处理：

  const routes: Routes = [
    // 你的其他路由配置
    { path: '**', redirectTo: '/', pathMatch: 'full' }
  ];
  

• 检查开发服务器静态文件路径
  确认开发服务器正确指向了Angular的输出目录（开发模式下的临时目录或构建后的dist目录），路径配置错误会导致服务器找不到资源返回404。

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