Angular 8项目中静态JSON文件的放置位置及加载问题

问题根源 #

Angular CLI默认只会把src/assets目录下的静态资源复制到构建后的输出目录（dist），你之前放在/src、/src/app或项目根目录的文件不会被打包到可访问的静态资源路径，所以请求会返回404。

快速解决步骤 #

1. 移动文件到指定目录
   把data.json移到src/assets目录下（如果src下没有assets文件夹，直接新建一个就行）。

2. 调整请求路径
   修改代码里的文件路径：

   private urlDataFile = './assets/data.json';
   // 用绝对路径更稳妥，避免相对路径的层级问题：
   // private urlDataFile = '/assets/data.json';
   

3. 重启服务验证
   重新运行ng serve，此时请求会指向http://localhost:4200/assets/data.json，就能正常加载JSON数据了。

可选：自定义静态资源规则 #

如果不想用assets目录，也可以修改angular.json配置，在projects -> [你的项目名称] -> architect -> build -> options -> assets数组里添加自定义路径，比如单独指定这个JSON文件：

"assets": [
  "src/favicon.ico",
  "src/assets",
  "src/data.json" // 新增这一行，将该文件标记为静态资源
]

修改后重启服务，就能继续用./data.json的路径访问了。

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