如何将Angular模块/组件打包为JS包并跨项目使用？解决导入报错

问题背景 #

你尝试将Angular组件打包为JS包，代码如下：

@Component({
  selector: 'app-component-overview',
  template: '<button><ng-content></ng-content></button>',
})
export class ButtonComponent {}

@NgModule({
  declarations: [ButtonComponent],
})
export class AppModule {}

打包后在另一个Angular项目导入时出现错误：

//ERROR in ... error TS2306 '...' is not a module.
   loadChildren: () => import('...').then(m=>m.ButtonModule)

希望避免自定义构建器和修改配置，找到文档完善的打包方案。

解决方案（无需自定义构建器） #

1. 使用Angular CLI库模式构建（官方推荐） #

Angular CLI原生支持库项目构建，这是官方文档明确的组件/模块复用方案：

• 在现有项目中生成库：

  ng generate library button-library
  

• 将ButtonComponent迁移到库目录projects/button-library/src/lib，创建独立的ButtonModule（不要用项目根模块AppModule）：

  @NgModule({
    declarations: [ButtonComponent],
    exports: [ButtonComponent] // 必须导出组件，外部才能引用
  })
  export class ButtonModule {}
  

• 在库的public-api.ts中导出模块和组件（这是库对外暴露的入口）：

  export * from './lib/button.component';
  export * from './lib/button.module';
  

• 构建库：

  ng build button-library
  

  构建产物会输出到dist/button-library，包含完整的ES模块、类型定义和适配Angular的打包结构。

2. 外部项目导入使用 #

• 本地安装打包好的库：

  npm install ../path/to/dist/button-library
  

• 在外部项目的模块中导入ButtonModule：

  import { NgModule } from '@angular/core';
  import { ButtonModule } from 'button-library';
  
  @NgModule({
    imports: [ButtonModule]
  })
  export class AppModule {}
  

• 直接在模板中使用组件：

  <app-component-overview>点击按钮</app-component-overview>
  

3. 错误原因分析 #

你之前的问题出在两个核心点：

• 使用了项目根模块AppModule而非独立的可复用模块，AppModule是为当前项目初始化设计的，不具备对外导出的结构
• 普通Angular项目构建产物是针对当前项目的运行环境，不是标准的库格式，缺少正确的模块导出声明和类型定义

关键注意事项 #

• 库模式构建自动处理Angular依赖树、类型声明、模块导出等问题，完全遵循官方规范
• 全程无需修改Webpack配置，所有构建逻辑由Angular CLI维护，文档完善
• 若需要发布到npm，直接进入dist/button-library目录执行npm publish即可

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