如何在Angular库中配置不同命名空间实现分路径导入

嘿，这个需求我之前帮同事实现过，本质上就是给你的Angular库配置子路径导出，让UI组件和服务能通过@contoso/core/ui、@contoso/core/services这种清晰的路径单独导入，而不是全都堆在根路径下。下面我一步步给你拆解具体操作：

第一步：整理库的目录结构 #

首先得把UI组件和服务分到独立的子目录里，这样不仅结构清晰，也方便后续配置。假设你的库在projects/contoso-core/src/lib下，调整后的目录应该是这样：

projects/contoso-core/src/lib/
├── ui/
│   ├── button/          # 你的UI组件文件夹
│   ├── card/
│   └── public-api.ts    # UI模块的专属导出入口
├── services/
│   ├── auth.service.ts  # 你的服务文件
│   ├── data.service.ts
│   └── public-api.ts    # 服务模块的专属导出入口
└── public-api.ts        # 根入口（可选保留，作为全量导出的入口）

每个子目录的public-api.ts负责导出该模块下的所有内容，比如ui/public-api.ts可以这么写：

export * from './button/button.component';
export * from './card/card.component';

services/public-api.ts同理：

export * from './auth.service';
export * from './data.service';

第二步：配置TypeScript路径映射 #

接下来要告诉TypeScript，@contoso/core/ui这种路径对应本地的哪个文件。打开库目录下的tsconfig.lib.json（路径：projects/contoso-core/tsconfig.lib.json），在compilerOptions里添加paths配置：

{
  "compilerOptions": {
    // 保留原有配置...
    "paths": {
      "@contoso/core/ui": ["./src/lib/ui/public-api.ts"],
      "@contoso/core/services": ["./src/lib/services/public-api.ts"]
    }
  }
}

另外，根项目的tsconfig.json也得加同样的配置，这样本地开发时IDE能正确识别这些路径，不会报红：

{
  "compilerOptions": {
    // 保留原有配置...
    "paths": {
      "@contoso/core": ["./projects/contoso-core/src/lib/public-api.ts"],
      "@contoso/core/ui": ["./projects/contoso-core/src/lib/ui/public-api.ts"],
      "@contoso/core/services": ["./projects/contoso-core/src/lib/services/public-api.ts"]
    }
  }
}

第三步：配置打包工具（ng-packagr） #

Angular CLI创建的库默认用ng-packagr打包，所以得修改projects/contoso-core/ng-package.json，添加子路径的导出声明，让打包后的库能识别这些子路径：

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/contoso-core",
  "lib": {
    "entryFile": "src/lib/public-api.ts",
    // 新增子路径导出配置
    "exports": {
      "./ui": "./src/lib/ui/public-api.ts",
      "./services": "./src/lib/services/public-api.ts"
    }
  }
}

这个配置会告诉打包工具，当用户导入@contoso/core/ui时，实际指向的是咱们子目录的public-api.ts文件。

第四步：测试导入效果 #

现在你可以执行ng build contoso-core打包库，然后在测试项目里安装这个库（本地测试可以用npm link快速关联），就能像你想要的那样导入了：

// 导入UI组件
import { ButtonComponent } from '@contoso/core/ui';

// 导入服务
import { AuthService } from '@contoso/core/services';

完美实现你要的分路径导入效果！

备注：内容来源于stack exchange，提问作者IvanEP