Angular中如何在多个库与应用间共享TypeScript装饰器

完全可以实现，你只需要将这套注册装饰器逻辑抽为所有库和应用共同依赖的公共模块即可，具体实现方案和注意事项如下：

核心实现步骤 #

• 第一步：抽离公共装饰器到独立共享库
  如果你用的是 Angular 多库架构/Monorepo 工作区，可以新建一个公共工具类库，比如命名为@your-scope/common-decorators，将ComponentRegistry.decorator.ts的代码放到这个库中，然后在库的公开导出入口暴露对应接口：

// public-api.ts
export { ComponentRegistry, ComponentLookup } from './lib/component-registry.decorator';

所有业务库和上层应用都从这个公共库导入装饰器，不要重复编写逻辑。

• 第二步：保证注册中心单例
  ES 模块天然是单例加载的，只要所有依赖方都从同一个公共包导入ComponentRegistry，全局就只会存在一个 Map 实例，所有组件的注册信息都会存入同一个注册中心，不会出现跨库注册无法读取的问题。
  如果是发布到 npm 公共仓库的场景，需要将这个公共包设为 peerDependency，避免不同依赖方安装多份副本导致实例不统一。

注意事项 #

• 防止组件被树摇
  如果被@ComponentLookup装饰的组件没有被任何代码显式导入，Angular 打包时会将其判定为死代码进行树摇，导致注册逻辑没有执行、注册中心找不到对应组件。
  可以通过两种方式解决：

1. 在各个业务库的入口文件中，显式导入所有被装饰的组件，触发装饰器执行
2. 所有被装饰的组件都在业务库的公开导出接口中暴露，由上层应用统一导入

• 避免 Key 冲突
  多个库可能出现组件命名重复的情况，建议约定 Key 前缀规则，比如[库名]:[组件名]，示例：

@ComponentLookup('user-lib:ProfileWidgetComponent')
export class ProfileWidgetComponent {}

• 类型优化
  可以引入 Angular 内置类型优化原有代码的类型安全，避免使用过多 any：

import { Type } from '@angular/core';

export const ComponentRegistry: Map<string, Type<unknown>> = new Map();

export const ComponentLookup = (key: string) => {
  return (cls: Type<unknown>) => {
    if (ComponentRegistry.has(key)) {
      console.warn(`组件Key ${key} 重复注册，将覆盖已有注册项`);
    }
    ComponentRegistry.set(key, cls);
  };
};

• 动态加载容错
  读取注册中心时增加异常处理，避免配置错误导致应用崩溃：

const classRef = ComponentRegistry.get(this.config.widgets.b4[i]);
if (!classRef) {
  console.warn(`未找到对应组件：${this.config.widgets.b4[i]}，请检查是否已注册`);
  continue;
}
this.addComponent(classRef, this.b4MenuWidgets);

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