AngularJS与Angular17+混合开发注入错误：ComponentFactoryResolver$1缺失

• 检查UpgradeModule的导入与初始化逻辑
  确保Angular根模块（如Ng2AppModule）正确导入UpgradeModule，并在模块初始化时通过ngDoBootstrap启动AngularJS应用，而非单独启动Angular。示例代码：

  import { NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { UpgradeModule } from '@angular/upgrade/static';
  import { Ng2AppComponent } from './app.component';
  
  @NgModule({
    imports: [BrowserModule, UpgradeModule],
    declarations: [Ng2AppComponent],
    bootstrap: [Ng2AppComponent]
  })
  export class Ng2AppModule {
    constructor(private upgrade: UpgradeModule) {}
    ngDoBootstrap() {
      this.upgrade.bootstrap(document.body, ['angularJsApp']);
    }
  }
  

• 显式提供ComponentFactoryResolver服务
  Angular17中ComponentFactoryResolver虽已过时，但降级组件仍依赖它。在Angular根模块的providers数组中显式声明该服务：

  import { ComponentFactoryResolver } from '@angular/core';
  
  @NgModule({
    // 其他配置项
    providers: [ComponentFactoryResolver]
  })
  export class Ng2AppModule { /* ... */ }
  

• 校验降级组件的注册流程
  确认使用downgradeComponent时，正确关联目标Angular组件，并在AngularJS模块中完成指令注册。示例：

  // Angular组件定义
  @Component({
    selector: 'ng2-component',
    template: '<p>Angular 17 Component</p>'
  })
  export class Ng2Component {}
  
  // 降级并注册到AngularJS模块
  angular.module('angularJsApp')
    .directive('ng2Component', downgradeComponent({ component: Ng2Component }) as angular.IDirectiveFactory);
  

• 排查Webpack配置兼容性
  自定义Webpack配置时需注意：

  • 避免tree-shaking移除@angular/upgrade/static模块的关键代码
  • 确保AngularJS与Angular的模块路径解析无冲突，必要时启用preserveSymlinks
  • 正确处理两类框架的打包入口与依赖映射

• 临时关闭严格DI模式排查
  如果AngularJS启用了strictDi，可先临时关闭该选项，确认是否为严格依赖检查导致的问题，后续再逐步恢复并调整依赖声明。

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