基于Angular12的组件库中如何声明公开函数并跨模块调用？

问题根源 #

你当前的目录结构中，loading和tool各自拥有独立的ng-package.json，被ng-packagr识别为两个独立的子库，每个子库的rootDir被限制在自身目录下，因此跨目录导入会触发文件不在rootDir范围内的错误。

可行解决方案 #

方案一：将tool改为共享工具目录（推荐） #

把tool从独立子库改为库内共享的工具目录，不再单独打包：

1. 删除tool/ng-package.json文件
2. 在根目录的index.ts中导出tool的内容，满足对外暴露的需求：

   // src/index.ts
   export * from './tool';
   

3. 在loading/index.ts中通过相对路径直接导入add函数：

   // src/loading/index.ts
   import { add } from '../tool/add';
   

方案二：配置TypeScript路径别名 #

通过tsconfig的路径别名统一导入规则，同时保持子库结构：

1. 在根目录的tsconfig.json的compilerOptions中添加路径配置：

   {
     "compilerOptions": {
       // 其他配置...
       "paths": {
         "@your-lib/tool": ["src/tool/index.ts"]
       }
     }
   }
   

   注意替换@your-lib为你的库实际名称
2. 在loading/index.ts中使用别名导入：

   import { add } from '@your-lib/tool';
   

3. 确保根目录的ng-package.json中配置正确的lib入口，让打包工具识别路径别名：

   {
     "lib": {
       "entryFile": "index.ts",
       "umdModuleIds": {
         "@your-lib/tool": "your-lib-tool"
       }
     }
   }
   

方案三：将tool作为独立子库引入 #

把tool打包成独立子库，让loading通过依赖方式导入：

1. 先单独打包tool子库：

   ng build tool
   

2. 在loading目录的package.json中添加本地依赖：

   {
     "dependencies": {
       "@your-lib/tool": "file:../dist/tool"
     }
   }
   

3. 在loading/index.ts中像外部依赖一样导入：

   import { add } from '@your-lib/tool';
   

4. 根目录的index.ts中依然可以导出tool的内容，供外部开发者使用：

   export * from './tool';
   

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