StaticInjectorError(AppModule)缺少ComponentFactoryResolver提供者，混合应用异常

我之前搭建Angular+AngularJS混合应用时遇到过完全相同的问题，这个错误本质是Angular的依赖注入系统无法找到ComponentFactoryResolver的提供者，通常和降级组件的配置或者UpgradeModule的初始化流程有关。结合你的Rails 5.2.0+Webpacker环境，给你整理了一套可行的解决方案：

1. 检查并修正AppModule的核心配置 #

ComponentFactoryResolver是Angular的核心服务，正常情况下BrowserModule会自动提供它，但混合模式下需要确保模块配置正确，尤其是要降级的组件必须被Angular预编译。

更新你的AppModule代码：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { UpgradeModule } from '@angular/upgrade/static';
import { ComponentFactoryResolver } from '@angular/core';

// 导入你要降级的Angular组件
import { YourAngularComponent } from './your-angular.component';

@NgModule({
  imports: [
    BrowserModule,
    UpgradeModule // 必须导入UpgradeModule
  ],
  declarations: [
    YourAngularComponent // 声明降级组件
  ],
  entryComponents: [YourAngularComponent], // 关键！Angular 8及以下需要将降级组件加入这里，确保预编译组件工厂
  providers: [
    ComponentFactoryResolver // 显式提供该服务，避免DI查找失败
  ]
})
export class AppModule {
  constructor(private upgrade: UpgradeModule) {}

  // 混合模式下，不要用bootstrap数组启动Angular组件，改用ngDoBootstrap启动AngularJS
  ngDoBootstrap() {
    // 替换成你的AngularJS根模块名称，strictDi可根据需求开启/关闭
    this.upgrade.bootstrap(document.body, ['yourAngularJsApp'], { strictDi: false });
  }
}

2. 正确实现组件降级逻辑 #

确保你用downgradeComponent把Angular组件转为AngularJS指令的代码正确，并且注册到你的AngularJS模块中：

import { downgradeComponent } from '@angular/upgrade/static';
import { YourAngularComponent } from './your-angular.component';

// 假设你的AngularJS模块已经定义完成
angular.module('yourAngularJsApp')
  .directive(
    'yourAngularComponent', // 这个是你要在AngularJS模板中使用的指令名
    downgradeComponent({ component: YourAngularComponent }) as angular.IDirectiveFactory
  );

3. 验证AngularJS模板中的使用方式 #

在你的AngularJS根模板中，使用刚才定义的指令来挂载降级后的Angular组件：

<!-- 你的AngularJS根模板 -->
<div ng-app="yourAngularJsApp">
  <!-- 使用降级后的指令 -->
  <your-angular-component></your-angular-component>
</div>

4. 检查Rails Webpacker配置（关键环境适配） #

因为你用的是Rails 5.2.0+Webpacker，要确保Webpack的配置正确处理Angular的编译需求：

• 确认Webpacker已经安装了Angular相关的依赖（@angular/core、@angular/upgrade、@angular-devkit/build-angular等）
• 检查config/webpack/environment.js中是否正确配置了Angular的loader，比如添加了@angular-devkit/build-angular的webpack配置片段

错误原因复盘 #

这个错误通常发生在以下场景：

• 要降级的Angular组件没有被加入entryComponents，导致Angular无法预编译它的组件工厂，进而找不到ComponentFactoryResolver的使用上下文
• UpgradeModule没有正确初始化，导致Angular的DI系统没有完全启动
• 开启了strictDi但没有显式提供ComponentFactoryResolver，导致AngularJS的严格DI模式阻止了自动注入

按照上面的步骤调整后，应该就能解决这个注入错误了。

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