Angular项目已安装对应依赖但import语句导致应用崩溃如何解决

你遇到的报错主要由三个原因导致，确实和package.json、tsconfig.json的配置有关：

• 缺失vega相关库的TypeScript类型声明包：你当前package.json的devDependencies中只安装了@types/d3，没有对应vega、vega-lite、vega-embed的类型定义，TypeScript编译时无法识别模块类型，直接抛出导入错误。
• tsconfig.json缺少ES模块兼容配置：当前配置没有开启esModuleInterop和allowSyntheticDefaultImports，无法兼容vega-embed这类ES模块的默认导入语法，不管用哪种import写法都会出现匹配错误。
• 业务代码存在逻辑错误：你在embedGraph方法中同时调用了embed.vegaEmbed()和embed()，但vega-embed的默认导出本身就是可直接调用的vegaEmbed方法，不存在embed.vegaEmbed这个属性，调用会直接触发运行时崩溃。

解决方案 #

第一步：安装缺失的类型依赖

执行以下命令安装类型包：

npm install --save-dev @types/vega @types/vega-lite @types/vega-embed

第二步：修改tsconfig.json配置

在compilerOptions节点下新增两个配置项：

{
  "compilerOptions": {
    // 保留原有其他配置，新增以下两行
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true
  }
}

第三步：修正业务代码

修改vega.component.ts中的embedGraph方法，删除无效调用：

async embedGraph(): Promise<void> {
  const spec = "/assets/density-heatmaps.vg.json";
  const result = await embed("figure#vega", spec);
  console.log(result.view);
}

第四步：清除缓存重启服务

删除项目目录下的node_modules文件夹和package-lock.json文件，重新执行npm install安装依赖，之后重启ng serve即可解决报错。

额外提示：请确认src/assets目录下存在density-heatmaps.vg.json文件，否则运行时会抛出资源404错误。

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