Angular路由硬刷新失效求助：子路由直接访问无视图且样式报错

当访问https://localhost:4200/user页面时，点击页面内指向/edit-email的链接可正常显示对应视图；但直接在浏览器输入https://localhost:4200/user/edit-email或执行硬刷新操作时，页面无视图显示，控制台报错：

Refused to apply style from 'https://localhost:4200/user/styles.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

不清楚加载样式时为何会带上/user路径，以下是user.routing文件代码：

const routes: Routes = [
  {
    path:'',
    component:UserComponent,
    canActivate:[AuthGaurd,RoleGaurd],
    children:[
      {
        path:'',
        component:DashboardComponent,
        pathMatch:'full'
      },
      {
        path:'edit-email',
        component:EditEmailComponent,
        pathMatch:'full'
      }
    ],
    data:{
      'role':'user'
    }
  }
];

问题根因 #

样式文件用了相对路径（比如styles.css），当路由进入/user/edit-email时，浏览器会把样式请求路径解析为/user/styles.css，但该路径下不存在样式文件，服务器会返回404页面（HTML类型），从而触发MIME类型不匹配的报错。同时，单页应用直接访问子路由时，服务器默认找不到对应文件，也会导致页面无法正常加载。

解决步骤 #

1. 修正样式引用路径：把样式引用改成绝对路径（开头加斜杠），比如/styles.css，这样无论当前路由是什么，都会从网站根目录请求样式文件。
2. 配置服务器路由 fallback：Angular是单页应用，直接访问子路由时需要服务器把所有路由请求转发到index.html，让Angular路由器处理：
   • 开发环境用ng serve时默认已处理，无需额外配置；
   • 生产环境：
     • Nginx：在配置文件中添加try_files $uri $uri/ /index.html;
     • Apache：配置RewriteRule ^ index.html [L]
3. 检查Angular样式配置：确认angular.json中styles数组里的样式文件路径配置正确，确保打包后样式文件能被正确加载。

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