Не удается разрешить все параметры для Компонента, когда зависимость зарегистрирована в службе с помощью предоставленной опции? - PullRequest
Новая
       31

Не удается разрешить все параметры для Компонента, когда зависимость зарегистрирована в службе с помощью предоставленной опции?

0 голосов
/ 04 апреля 2020

Я играл с DI в Angular и не могу понять, почему я сталкиваюсь с ошибкой при указании службы, предоставляемой в модуле через 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 на NgModule фабрике декораторов и AppModule и LazyModule и настроил мою стратегию маршрутизации. Вот настройка: 

// 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 {}

В результате я получаю следующую ошибку:

Uncaught Error: Не удается разрешить все параметры для SharedComponent: (? ).

Но если я прокомментирую providedIn: SharedModule и объявлю провайдера для SharedService в SharedModule, это будет работать как шарм: 

// shared.module.ts

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

Пожалуйста, см. StackBlitz демо.

1 Ответ

0 голосов
/ 04 апреля 2020

Когда я запускал его локально на моей машине, он давал мне console.warn, говоря, что существует циклическая зависимость.

Обнаружена циклическая зависимость: src \ app \ shared.component.ts -> src \ app \ shared.service.ts -> src \ app \ shared.module.ts -> src \ app \ shared.component.ts

Я исправил это, как описано в этом руководстве добавив дополнительный модуль, предназначенный для сервиса. Поэтому лучше не полагаться на StackBlitz, когда дело доходит до отладки.

...