Круговая зависимость при предоставлении услуги в модуле функций Angular 6 / Ionic 4

Question

У меня есть приложение Ionic 3, которое я портирую на Ionic 4, и теперь я хочу использовать отложенную загрузку для своих страниц (компонентов). Поэтому я делю приложение на функциональные модули.

В то время как большинство моих услуг будут в одном общем модуле Core (представленном в root), есть несколько случаев, когда у меня есть Services, которые используются только модулем одной страницы, поэтому я подумал Я бы включил эту услугу в функциональный модуль.

Из того, что я прочитал, использование providedIn является "новым способом" предоставления услуг.

Итак, у меня изначально было следующее ...

    // home.module.ts
    import { HomePage } from './home.page';
    import { HomeRoutingModule } from './home-routing.module';

    @NgModule({
      imports: [
        CommonModule,
        TranslateModule.forChild(),
        FormsModule,
        IonicModule,
        HomeRoutingModule
      ],
      providers: [],  // <--- note no providers
      declarations: [HomePage, HomeRoutingModule.components]
    })
    export class HomePageModule {}

    // home-routing.module.ts
    import { NgModule } from '@angular/core';
    import { RouterModule, Routes } from '@angular/router';
    import { HomePage } from './home.page';

    const routes: Routes = [
      { path: '', component: HomePage }
    ];
    @NgModule({
      imports: [RouterModule.forChild(routes)],
      exports: [RouterModule]
    })
    export class HomeRoutingModule {
      static components = [HomePage];
    }

А в сервисе я использовал providedIn

    import { HomePageModule } from '../home.module';

    @Injectable({
      providedIn: HomePageModule
    })
    export class AvailablePagesService {
    ...

Если я запускаю это как есть, служба не найдена ...

ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[HomePage -> AvailablePagesService]: 
      StaticInjectorError(Platform: core)[HomePage -> AvailablePagesService]: 
        NullInjectorError: No provider for AvailablePagesService!
    Error: StaticInjectorError(AppModule)[HomePage -> AvailablePagesService]: 
      StaticInjectorError(Platform: core)[HomePage -> AvailablePagesService]: 
        NullInjectorError: No provider for AvailablePagesService!
        at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:8896)

Поэтому я добавил службу в массив провайдера Modiles ...

Т.е. в home.module.ts добавляю ..

 providers: [AvailablePagesService],

Теперь, это дает мне предупреждение о циклической зависимости (3 раза)

    WARNING in Circular dependency detected:
    [ng] src\app\home\home-routing.module.ts -> src\app\home\home.page.ts -> src\app\home\services\available-pages.service.ts -> src\app\home\home.module.ts -> src\app\home\home-routing.module.ts

Затем я попробовал следующее ..

 providers: [HomePageModule],

Теперь я снова получаю ту же ошибку инжектора (не могу найти сервис)

Я совсем не понимаю, как мне это сделать?

Любая помощь будет принята с благодарностью!

Заранее спасибо

Answer 1

Это происходит потому, что ваш импорт имеет круг (<- знак зависит от): <br>

routing <- component <- service <- module <- routing

И когда webpack пытается разрешить импорт, возникает проблема с встраиванием бесконечного пакета. В вашем случае лучший способ:
module <- component && service && routing
component <- service
routing<- component
service <- (nothing)

В module.ts

import { AvailablePagesService } from './available-pages.service.ts';
import { PageComponent } from './home.page';

...
@NgModule({
      declarations: [HomePage, ...]
      imports: [RouterModule.forChild(routes)],
      providers: [AvailablePagesService ]
})

In available-pages.service.ts

@Injectable()
export class AvailablePagesService {
...

In home.page

import { AvailablePagesService } from './available-pages.service.ts';
...