provideIn: сбой LazyModule без ошибки провайдера

Question

Я хотел бы сослаться на опцию providedIn на модуль Angular, предоставляющий как деклараторы, так и зависимости. Я создал дополнительный модуль SharedModule, который будет служить подмодулем для ленивого модуля LazyModule, чтобы его можно было использовать в качестве «якоря» для ленивого сервиса, который я хочу предоставить (CounterService в моем случае). Я следовал этому руководству , чтобы добиться этого, но явно делал что-то не так. Кроме того, я сделал небольшую схему, но, пожалуйста, взгляните на StackBlitz , чтобы увидеть полный пример.

 Eager Part                                        Lazy Loaded Module

 +----------------------------------------------+  +--------------------------------------+
 |Routes:                                       |  | @NgModule({                          |
 |                                              |  |   imports: [SharedModule]            |
 |{                                             |  | }                                    |
 |  path: 'lazy',                               |  | export class LazyModule {}           |
 |  loadChildren: './lazy/lazy.module#LazyModule|  |                                      |
 |}                                             |  |                                      |
 +----------------------------------------------+  | SharedModule                         |
                                                   | +----------------------------------+ |
                                                   | |@NgModule({                       | |
                                                   | |  declarations: [SharedComponent],| |
                                                   | |  exports: [SharedComponent]      | |
                                                   | |})                                | |
                                                   | |export class SharedModule {}      | |
                                                   | +----------------------------------+ |
                                                   |                                      |
                                                   |                                      |
                                                   | LazyService                          |
                                                   | +----------------------------------+ |
                                                   | |@Injectable({                     | |
                                                   | |  providedIn: SharedModule        | |
                                                   | |})                                | |
                                                   | |export class CounterService {     | |
                                                   | |  counter = 0;                    | |
                                                   | |}                                 | |
                                                   | +----------------------------------+ |
                                                   |                                      |
                                                   +--------------------------------------+

Answer 1

Как упоминается в статье , которую вы цитировали , вам необходимо определить службу в своем собственном модуле, чтобы избежать проблемы циклической зависимости.

counter.module.ts

import { NgModule, ModuleWithProviders } from "@angular/core";


@NgModule({
})
export class CounterModule {}

counter.service.ts

import { Injectable } from '@angular/core';
import { CounterModule } from "./counter.module";

@Injectable({
  providedIn: CounterModule
})
export class CounterService {
  counter = 0;
}

Импорт модуля счетчика в общий модуль. shared.module.ts

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

Вот блиц рабочего стека: https://stackblitz.com/edit/providedin-module-wglojs