Angular项目中访问vega-datasets本地数据集路径配置问题

问题原因 #

Angular 框架默认不会将 node_modules 目录下的文件作为可公开访问的静态资源处理，你填写的 ../node_modules/vega-datasets/data/miserables.json 是项目本地依赖的存储路径，浏览器运行时根本无法访问到该路径下的资源，这是图表无法渲染的核心原因。

修复步骤 #

1. 配置静态资源映射
   打开项目根目录下的 angular.json 配置文件，找到 projects → 你的项目名称 → architect → build → options → assets 配置项，新增如下规则：

{
  "glob": "**/*.json",
  "input": "node_modules/vega-datasets/data",
  "output": "/assets/vega-data"
}

该配置会在项目编译时，自动把 vega-datasets 下的所有json数据集文件打包到产物的 /assets/vega-data 路径下。

2. 修改Vega配置中的数据路径
   把你Vega代码中两处url配置从：
   "url": "../node_modules/vega-datasets/data/miserables.json"
   修改为：
   "url": "/assets/vega-data/miserables.json"

3. 重启Angular开发服务，重新编译项目后图表即可正常渲染。

内容的提问来源于stack exchange，提问作者Reem Al-Assaf