构建Angular独立库时如何打包关联的独立组件与指令

问题背景 #

构建了包含关联紧密的独立组件和指令的Angular库，组件依赖该指令，希望实现单元素导入以同时引入两者。尝试通过导出包含组件和指令的数组实现，但本地测试正常，打包后在实际应用中构建失败，报错TS-993004: Unable to import component NgxCaboodalQRCodeComponent，提示组件符号未从库的index.d.ts导出。

核心原因 #

Angular编译器需要直接识别并访问组件、指令的类符号，仅通过数组导出这些符号时，打包生成的类型定义文件（.d.ts）不会将数组内的成员作为顶层导出符号暴露给编译器，导致编译器无法找到对应的组件类。

有效解决方法 #

方法1：通过NgModule聚合导出（适合模块式开发） #

创建一个NgModule，将组件和指令声明并导出，用户只需导入该模块即可同时使用两者：

1. 在库的lib目录下创建模块文件ngx-caboodal-qrcode.module.ts：

import { NgModule } from '@angular/core';
import { NgxCaboodalQRCodeComponent } from './ngx-caboodal-qrcode.component';
import { NgxCaboodalQRCodeDirective } from './ngx-caboodal-qrcode.directive';

@NgModule({
  declarations: [
    NgxCaboodalQRCodeComponent,
    NgxCaboodalQRCodeDirective
  ],
  exports: [
    NgxCaboodalQRCodeComponent,
    NgxCaboodalQRCodeDirective
  ]
})
export class NgxCaboodalQRCodeModule { }

2. 修改public-api.ts，同时导出模块、组件、指令和类型：

export * from './lib/types';
export * from './lib/ngx-caboodal-qrcode.component';
export * from './lib/ngx-caboodal-qrcode.directive';
export { NgxCaboodalQRCodeModule } from './lib/ngx-caboodal-qrcode.module';

用户使用时，只需导入模块并添加到自身模块的imports数组中，即可直接使用组件和指令：

import { NgxCaboodalQRCodeModule } from 'ngx-caboodal-qrcode';

@NgModule({
  imports: [NgxCaboodalQRCodeModule]
})
export class YourFeatureModule { }

方法2：单独导出符号+聚合对象（适合Standalone组件/指令） #

如果组件和指令是Standalone类型，需确保每个符号单独导出，同时提供聚合对象方便用户一次性导入：

修改public-api.ts：

import { NgxCaboodalQRCodeComponent } from "./lib/ngx-caboodal-qrcode.component";
import { NgxCaboodalQRCodeDirective } from "./lib/ngx-caboodal-qrcode.directive";

export * from './lib/types';
// 单独导出每个符号，供Angular编译器识别
export { NgxCaboodalQRCodeComponent, NgxCaboodalQRCodeDirective };
// 导出聚合对象，方便用户一次性引用
export const NgxCaboodalQRCode = {
  NgxCaboodalQRCodeComponent,
  NgxCaboodalQRCodeDirective
} as const;

用户使用时，可通过聚合对象快速导入：

import { NgxCaboodalQRCode } from 'ngx-caboodal-qrcode';

@Component({
  standalone: true,
  imports: [
    NgxCaboodalQRCode.NgxCaboodalQRCodeComponent,
    NgxCaboodalQRCode.NgxCaboodalQRCodeDirective
  ],
  // ...
})
export class YourStandaloneComponent { }

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