Angular 12升级后导入angular.json触发Import Error问题求助

报错根因 #

Angular 12 升级了底层依赖的webpack版本，对ES模块规范的校验更加严格，JSON模块仅支持默认导出，不再允许通过import * as的方式导入后直接访问顶层属性作为命名导出。你的tsconfig已经配置了resolveJsonModule和allowSyntheticDefaultImports，只要调整导入语法即可兼容。

适配方案 #

直接修改导入语句为默认导入写法即可，原有读取JSON属性的代码不需要改动：

// 修改前
// import * as angular_constants from "../../angular.json";
// 修改后
import angular_constants from "../../angular.json";

// 后续代码无需调整
var all_keys = Object.keys(angular_constants.projects);
this.project_labels = all_keys[0];

补充说明 #

如果你的项目开启了更严格的ES模块校验规则，也可以使用标准的JSON导入断言写法：

import angular_constants from "../../angular.json" assert { type: "json" };

另外注意angular.json属于构建配置文件，导入后会被打包到前端产物中，不要在该文件中存放敏感配置避免泄漏。

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