Angular 2两应用共享模块出现StaticInjectorError问题求助

遇到这种跨应用共享模块导致的注入错误，大概率是依赖注入上下文不匹配或者模块配置不当的问题，我来给你拆解一下解决方案：

问题根源 #

你直接从应用B相对导入应用A的模块，相当于把应用A的模块代码直接拉到应用B里运行，但两个应用的注入器上下文是独立的。ComponentFactoryResolver是Angular核心框架提供的服务，应用A的模块在自己的编译环境下默认能拿到这个服务，但跨应用直接导入时，应用B的注入器无法正确关联到这个依赖，就会抛出找不到提供者的错误。

具体解决方案 #

1. 把共享模块抽成独立Angular库 #

别再直接跨应用相对导入了，这不是Angular推荐的共享模块方式。你应该把需要共享的模块做成独立的Angular库：

• 用Angular CLI创建库：

  ng generate library shared-feature
  

• 把原来应用A里的共享模块代码迁移到这个库中，确保库的public-api.ts导出了需要共享的模块、组件等。
• 构建库并在两个应用中安装依赖：

  ng build shared-feature
  # 在应用A和应用B的package.json里添加依赖，或者用npm link本地调试
  

2. 正确配置共享模块的依赖 #

如果共享模块用到了AgGrid，要确保模块配置正确：

// shared-feature/src/lib/shared-feature.module.ts
import { NgModule, ModuleWithProviders } from '@angular/core';
import { AgGridModule } from 'ag-grid-angular';

@NgModule({
  imports: [AgGridModule.withComponents([])],
  exports: [AgGridModule] // 导出供其他应用使用
})
export class SharedFeatureModule {
  // 用forRoot模式提供全局服务（如果有的话）
  static forRoot(): ModuleWithProviders<SharedFeatureModule> {
    return {
      ngModule: SharedFeatureModule,
      providers: [] // 这里放需要全局共享的服务
    };
  }
}

3. 在两个应用中正确导入共享模块 #

不管是应用A还是应用B，都要在根模块（AppModule）里用forRoot()方式导入共享库：

// app-b/src/app/app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { SharedFeatureModule } from 'shared-feature'; // 从独立库导入

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule, // 必须导入，它提供了ComponentFactoryResolver等核心服务
    SharedFeatureModule.forRoot()
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

4. 清理缓存重新构建 #

有时候旧的构建缓存会导致依赖混乱，执行以下命令清理后重新构建：

ng clean
ng build shared-feature
ng serve app-b

这样调整后，两个应用的依赖注入上下文就能正确关联，ComponentFactoryResolver的提供者也会被正确识别，应该就能解决这个错误了。

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