Angular项目读取assets目录下JSON文件报404错误原因咨询

错误原因 #

Angular 运行时不会暴露源码目录src给外部访问，你写的src/assets/data.json是本地源码的物理路径，不是开发服务或生产构建后可访问的静态资源路径。
默认配置下，Angular 会在构建/启动开发服务时，将src/assets目录下的所有资源直接复制到站点根目录下的assets文件夹中，运行时访问该目录下的资源直接用/assets/作为路径前缀即可，不需要拼接src前缀。你当前请求的http://localhost:4200/src/assets/data.json不存在对应的静态资源，因此返回404。

修复方案 #

修改ProductsService中的请求URL即可：

public getProducts(): Observable<Product[]> {
    // 移除路径前的src前缀
    const url: string = '/assets/data.json';
    return this.httpClient.get<Product[]>(url);
}

异常排查 #

如果修改后仍然返回404，可以依次排查以下配置：

• 打开项目根目录的angular.json，找到projects → 你的项目名 → architect → build → options → assets配置项，确认列表中包含"src/assets"
• 确认data.json的文件名、后缀名和路径大小写完全匹配，Angular开发服务在Linux、Mac等系统下对路径大小写敏感
• 如果你的应用部署在站点子路径下，需要在路径前拼接baseHref前缀，示例：${document.baseURI}/assets/data.json

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