Angular AOT生产模式下使用ReflectionCapabilities无法获取注解如何解决

你使用的ɵReflectionCapabilities是Angular内部非公开API，依赖运行时装饰器元数据。AOT编译阶段默认会擦除所有装饰器元数据，开启生产优化后Terser还会进一步Tree Shaking掉未被显式引用的元数据定义，所以refCap.annotations(type)会返回空数组。

方案1：显式导出声明（最推荐，稳定无兼容问题） #

直接从模块文件导出声明数组，完全不需要依赖反射能力，所有编译模式下都能正常运行：

// 业务模块定义
export const MyModuleDeclarations = [Comp1, Comp2, Comp3];
@NgModule({
  declarations: MyModuleDeclarations,
  // 其他模块配置
})
export class MyModule {}

修改路由工厂直接读取导出的数组即可，无需反射逻辑。

方案2：读取AOT生成的模块定义（兼容AOT/JIT，无需修改模块结构） #

Angular AOT编译后会为每个NgModule生成静态的ɵmod（Angular10及以上）/ngModuleDef属性，该属性是Angular运行时依赖的内置定义，不会被优化工具删除，直接读取该属性下的declarations即可：

routeFactory(types: any[]) {
  let declarations: any[] = [];
  for (let type of types) {
    const moduleDef = type.ɵmod ?? type.ngModuleDef;
    if (moduleDef?.declarations) {
      declarations = declarations.concat(moduleDef.declarations);
    }
  }
  // 后续动态路由逻辑
}

注意：ɵmod前缀为ɵ属于Angular内部API，跨大版本升级可能有变化，Angular10-15版本通用。

方案3：强制保留元数据（hack方案，不推荐长期使用） #

如果不想修改现有代码结构，可以通过配置强制编译器和优化工具保留装饰器元数据：

1. 给所有需要读取元数据的模块添加@dynamic注释，告知Angular编译器不要擦除该类的元数据：

/**
 * @dynamic
 */
@NgModule({
  declarations: [Comp1, Comp2],
})
export class MyModule {}

2. 修改tsconfig.json开启装饰器元数据输出：

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  }
}

3. 修改angular.json生产配置，给Terser添加保留规则：

"production": {
  "aot": true,
  "buildOptimizer": true,
  "optimization": {
    "scripts": {
      "terserOptions": {
        "keepClassNames": true,
        "keepFnames": true,
        "mangle": {
          "reserved": ["NgModule", "Component", "Injectable"]
        }
      }
    },
    "styles": true,
    "fonts": true
  }
}

该方案缺点是会增加打包体积，且高版本Angular可能不兼容。

你当前的routeProvider写法存在错误：useFactory需要传入工厂函数引用，你现在是直接执行了routeFactory，正确写法如下：

export function routeProvider(...types: any[]) {
  return {
    ngModule: RouterModule,
    providers: [
      {
        provide: ROUTES,
        multi: true,
        useFactory: () => routeFactory(types)
      }
    ]
  };
}

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