MEAN Stack CRUD应用（Angular CLI）图片上传后404，重编译Webpack后正常

问题根源 #

这问题我之前帮好几个开发者踩过坑，本质是Angular CLI开发服务器的资源处理逻辑导致的：当你运行ng serve时，CLI会把src/assets目录下的文件一次性复制到内存中的构建目录，之后它只会监听.ts、.html这类源码文件的变化来触发热重载，但不会自动检测src/assets里动态新增的文件。所以你上传图片到src/assets/images后，开发服务器根本不知道这个新文件存在，自然返回404；而重新编译时，CLI会重新扫描整个src/assets目录，把新图片同步到内存目录，这时候就能访问了。

解决方案（分开发/生产环境） #

开发环境：调整上传目录与配置

最稳妥的办法是把上传的图片放到项目根目录的独立文件夹（而非src内部），让Angular开发服务器监听这个目录的变化：

• 第一步：在项目根目录创建一个uploads文件夹（和src同级）。
• 第二步：修改angular.json文件，找到architect > build > options > assets数组，添加如下配置：

  {
    "glob": "**/*",
    "input": "./uploads",
    "output": "/uploads/"
  }
  

  这样Angular会把uploads目录下的所有文件都作为静态资源处理，并且开发服务器会监听这个目录的新增/修改。
• 第三步：修改你的后端上传逻辑，把图片保存到./uploads目录（而不是src/assets/images）。
• 第四步：重启ng serve，之后上传的图片就能通过http://localhost:4200/uploads/[你的图片名].jpg直接访问，而且不需要重新编译。

生产环境：规范静态资源托管

生产环境下你不会用ng serve，而是把构建好的dist目录部署到Nginx/Apache这类服务器上。这时候要注意：

• 不要把用户上传的图片放到项目的src目录，而是上传到服务器的独立静态资源目录（比如/var/www/uploads）。
• 在服务器配置里，把/uploads路径映射到这个静态资源目录，这样前端就能通过/uploads/xxx.jpg访问到图片。

为什么重新编译后能正常显示？ #

重新编译时，Angular CLI会重新遍历src/assets（如果之前是存在这里）的所有文件，把新上传的图片同步到构建目录（不管是内存还是实际的dist），这时候开发服务器就能找到这个文件并返回了。

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