Angular 9 CLI创建的库无法单独导入模块，如何实现按需加载？

我完全理解你的困扰——用Angular CLI默认创建的库只能全量导入，确实会导致应用体积冗余，像Angular Material那样的按需导入才是实用的方案。下面我会一步步带你配置，让你的@devmonkeys/mark6库支持子路径导入：

1. 重构库的目录结构 #

首先要把每个独立组件/模块拆成单独的子目录，让结构更清晰，比如：

projects/mark6/src/lib/
├── image/
│   ├── image.component.ts
│   ├── image.module.ts
│   └── public-api.ts  // 子模块自己的导出入口
├── button/
│   ├── button.component.ts
│   ├── button.module.ts
│   └── public-api.ts
└── public-api.ts  // 库根级的导出入口

2. 配置子模块的public-api.ts #

每个子模块的public-api.ts负责对外暴露该模块的内容，比如image模块的文件：

// projects/mark6/src/lib/image/public-api.ts
export * from './image.module';
export * from './image.component';

这样外部就能直接导入这个模块的组件或模块类了。

3. 更新根级public-api.ts #

根级的public-api.ts可以保留全量导出（方便需要一次性引入所有模块的场景），同时也要关联子模块的入口：

// projects/mark6/src/lib/public-api.ts
// 全量导出（可选，按需保留）
export * from './image/public-api';
export * from './button/public-api';

4. 配置TypeScript路径映射 #

在projects/mark6/tsconfig.lib.json里添加paths配置，让TypeScript能识别子路径的导入：

{
  "compilerOptions": {
    // ... 其他已有配置
    "paths": {
      "@devmonkeys/mark6/image": ["src/lib/image/public-api.ts"],
      "@devmonkeys/mark6/button": ["src/lib/button/public-api.ts"]
    }
  }
}

5. 关键：配置package.json的exports字段 #

这一步是让构建工具（比如Webpack、Angular CLI）能正确解析子路径。找到你的库的package.json（如果是未构建状态，就在projects/mark6/下；构建后会复制到dist/mark6/下），添加exports字段：

{
  "name": "@devmonkeys/mark6",
  "version": "0.0.1",
  "exports": {
    ".": "./public-api.js",
    "./image": "./image/public-api.js",
    "./button": "./button/public-api.js"
  },
  // ... 其他字段（比如dependencies、peerDependencies等）
}

注意路径要和构建后的文件结构对应——构建后每个子模块会在dist/mark6/下生成对应的文件夹，里面包含编译后的public-api.js。

6. 重新构建库 #

运行Angular CLI的构建命令，让配置生效：

ng build mark6

7. 测试按需导入 #

现在你就可以在应用里像使用Angular Material那样导入单个模块了：

import { ImageModule } from '@devmonkeys/mark6/image';

@NgModule({
  imports: [ImageModule]
})
export class AppModule {}

此时构建工具只会打包image模块相关的代码，不会加载整个库，完美实现按需引入！

额外注意事项 #

• 确保每个子模块是独立的，避免模块间不必要的依赖，防止意外引入其他模块代码。
• Angular 9默认启用IVY编译器，如果你的库有兼容性问题，可以检查tsconfig.lib.json里的enableIvy配置。
• 如果要发布到npm，记得把dist/mark6下的所有文件（包括正确配置的package.json）推送到npm仓库。

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