Angular12同级库导入报Angular structure loaded相关错误怎么解决

结论 #

Angular 工作空间原生支持同级库互相引用，无需提前发布到NPM或Github。你遇到的报错是本地库引用配置错误导致的，可通过以下步骤解决：

报错根因：Angular structure loaded both synchronously and asynchronously是因为编译器同时加载了两份lib_a实例，一份是你直接导入的lib_a源码，另一份是工作空间默认加载的构建产物实例，两者加载时机不一致触发冲突。

1. 配置路径别名指向本地构建产物 #

打开工作空间根目录的tsconfig.json，在compilerOptions.paths节点下添加lib_a的本地输出路径映射：

{
  "compilerOptions": {
    "paths": {
      "lib_a": ["./dist/lib_a"],
      // 如果lib_a有二级入口，新增下面这行
      "lib_a/*": ["./dist/lib_a/*"]
    }
  }
}

2. 严格按照依赖顺序构建 #

lib_b依赖lib_a，因此必须先完成lib_a的构建，再构建lib_b。可在根目录package.json中添加批量构建脚本简化操作：

{
  "scripts": {
    "build:lib-a": "ng build lib_a --configuration production",
    "build:lib-b": "npm run build:lib-a && ng build lib_b --configuration production",
    "build:host": "npm run build:lib-b && ng build host --configuration production"
  }
}

3. 修正lib_b中的导入写法 #

所有对lib_a的导入必须使用包名导入，禁止使用相对路径导入源码：

• 正确写法：import { ButtonComponent } from 'lib_a';
• 错误写法：import { ButtonComponent } from '../../lib_a/src/public-api';

4. 统一两个库的编译配置 #

打开两个库各自的ng-package.json与package.json，确认以下配置一致：

1. Ivy开关配置统一：要么同时设置"enableIvy": false，要么同时开启Ivy（Angular 12之后View Engine已被废弃，优先选择同时开启Ivy，可避免大部分兼容问题）
2. 在lib_b的package.json中，将lib_a添加到peerDependencies节点：

{
  "peerDependencies": {
    "lib_a": "*"
  }
}

5. 清理缓存重试 #

构建前先删除根目录下的node_modules/.cache、dist文件夹，再执行对应的构建脚本即可。

内容的提问来源于stack exchange，提问作者Alejandro L.