angular - 通过提供的选项在服务中注册依赖项时无法解析组件的所有参数？

Question

我一直在使用 Angular 中的 DI，但无法弄清楚为什么在指定要在模块中提供的服务时遇到错误providedIn。

首先，我在SharedModule那里创建、声明SharedComponent并配置SharedService如下：

// shared.module.ts

@NgModule({
  declarations: [SharedComponent],
  exports: [SharedComponent]
})
export class SharedModule {}

// shared.service.ts

@Injectable({
  providedIn: SharedModule
})
export class SharedService {
  prop = Math.random();
}

然后我添加了一个惰性模块，包含SharedModule在两者的装饰器工厂的imports属性中，并配置了我的路由策略。这是设置：NgModuleAppModuleLazyModule

// app.module.ts

const routes: Routes = [
  { path: '', redirectTo: 'eager', pathMatch: 'full' },
  { path: 'eager', component: SharedComponent },
  { path: 'lazy', loadChildren: './lazy.module#LazyModule' }
];

const routing: ModuleWithProviders = RouterModule.forRoot(routes);

@NgModule({
  imports: [
    routing,
    BrowserModule,
    SharedModule
  ],
  declarations: [AppComponent, EagerComponent],
  bootstrap: [AppComponent],
  providers: [{provide: APP_BASE_HREF, useValue: '/'}]
})
export class AppModule {}

// lazy.module.ts

const routes: Routes = [
  { path: '', component: SharedComponent }
];

export const routing: ModuleWithProviders = RouterModule.forChild(routes);

@NgModule({
  imports: [
    SharedModule,
    routing
  ],
})
export class LazyModule {}

结果，我收到以下错误：

未捕获的错误：无法解析 SharedComponent 的所有参数：(?)。

但是，如果我评论providedIn: SharedModule并声明其中的提供者，SharedService它SharedModule就像一个魅力：

// shared.module.ts

@NgModule({
  declarations: [SharedComponent],
  exports: [SharedComponent],
  providers: [SharedService]
})
export class SharedModule {}

请参阅StackBlitz演示。

Answer 1

当我在我的机器上本地运行它时，它告诉我console.warn存在循环依赖。

检测到循环依赖：src\app\shared.component.ts -> src\app\shared.service.ts -> src\app\shared.module.ts -> src\app\shared.component.ts

我通过添加用于该服务的附加模块来修复它，如本指南所述。所以在调试的时候最好不要依赖 StackBlitz。