Angular CLI Assets文件夹在ng serve时无法在浏览器正常渲染

我之前维护Angular项目时也碰到过一模一样的问题——ng build后dist里的Assets文件都完整存在，但ng serve启动开发服务器后，浏览器就是加载不到Assets里的资源。别慌，咱们一步步排查解决：

• 先检查angular.json的Assets配置（最常见原因）
  Angular是通过angular.json里的配置来决定哪些静态资源要被打包/加载的。打开项目根目录的angular.json，找到projects -> [你的项目名称] -> architect -> build -> options -> assets这个数组，确认里面是否包含了src/assets（或者你实际的Assets路径）。

  正确的配置示例应该是这样：

  "assets": [
    "src/favicon.ico",
    "src/assets"
  ]
  

  如果这里漏写了src/assets，那开发服务器自然不会把这个文件夹作为静态资源目录加载。要是你只需要Assets里的某个子文件夹，也可以单独配置，比如"src/assets/images"。

• 清理缓存并重启开发服务器
  Angular的开发服务器有时候会缓存旧的配置，哪怕你修改了angular.json也不会立即生效。试试这些操作：

  • 先停止当前的ng serve进程，手动删掉项目根目录的dist文件夹（虽然ng serve默认不用dist，但缓存可能残留）
  • 执行ng cache clean清理全局缓存
  • 再重新启动ng serve --delete-output-path，强制清理输出目录后启动

• 检查模板里的资源引用路径
  有时候不是Assets没被加载，而是你引用资源的路径错了！尤其是在有路由的页面里，相对路径很容易出问题。

  正确的引用方式应该用根路径开头的写法（带斜杠）：

  <img src="/assets/logo.png" alt="项目logo">
  

  错误写法（在嵌套路由下会找不到资源）：

  <img src="assets/logo.png" alt="项目logo">
  

  如果是在TypeScript代码里引用资源，记得用相对路径或者require：

  const avatarPath = require('../assets/avatar.png');
  

• 排查路由拦截问题
  如果你配置了通配符路由（比如{ path: '**', component: NotFoundComponent }），要注意路由规则会不会把Assets的请求给拦截了。比如如果你的路由里有匹配assets开头的路径，那浏览器请求资源时会被路由处理，而不是返回静态文件。

  解决方法是调整路由顺序，把静态资源的优先级放在路由前面，或者修改通配符路由的规则，避免匹配Assets相关路径。

• 验证资源是否真的被服务器加载
  打开浏览器开发者工具（按F12），切换到「Network」标签，刷新页面后看看Assets文件的请求状态：

  • 如果是404状态码：说明服务器根本没找到这个资源，回到前面的配置步骤检查
  • 如果是200但资源显示异常：可能是资源本身损坏，或者MIME类型配置有问题

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