Angular получил Обнаружение циклической зависимости ПРЕДУПРЕЖДЕНИЕ при использовании Сервиса с обеспечить In: LazyModule - PullRequest
Новая
       21

Angular получил Обнаружение циклической зависимости ПРЕДУПРЕЖДЕНИЕ при использовании Сервиса с обеспечить In: LazyModule

0 голосов
/ 11 июля 2019

Я на Angular 8, простое приложение, с загруженным модулем Lazy и предоставленной службой. В: 'root': все работает.

Теперь я хотел бы предоставить службу в LazyLoadedModule, поэтомучто услуга предоставляется только тогда, когда загруженный ленивый модуль загружается по соответствующему маршруту.Поэтому я обновил свой сервис следующим образом: 

@Injectable({
  providedIn: LazyModule
})
export class MyService {... }

Этот сервис внедряется в компонент, объявленный в LazyModule.Теперь я получил следующую ошибку:

ПРЕДУПРЕЖДЕНИЕ при обнаружении циклической зависимости: src \ app \ lazy-module \ lazy.service.ts -> src \ app \ lazy-module \ lazy.module.ts -> src\ app \ lazy-module \ lazy-routing.module.ts -> src \ app \ lazy-module \ lazy-component \ lazy.component.ts-> src \ app \ lazy-module \ lazy.service.ts

Итак, в основном:

  • lazy.service зависит от lazy.module (вызвано предоставленным, я думаю,)
  • lazy-модуль имеет зависимость отМодуль отложенной маршрутизации (потому что файл маршрутизации импортирован в его модуль)
  • Модуль отложенной маршрутизации зависит от некоторых компонентов, поскольку я с нетерпением загружаю какой-либо компонент, если для маршрута задано '', например
  • компонент имеет зависимость lazy.service, поскольку он внедряется в конструктор ...

Я пытаюсь выполнить репликацию на Stackblitz , но я получил еще одну ошибку: Нет провайдера для LazyService!

Lazy.Service.ts 

@Injectable({
  providedIn: LazyModule
})
export class LazyService { ... }

Lazy-routing.module 

const ROUTES: Routes = [
  {
    path: '',
    component: LazyComponent
  }
 ];

@NgModule({
  imports: [RouterModule.forChild(ROUTES)],
  exports: [RouterModule]
})
export class LazyRoutingModule { }

Lazy-component.ts 

export class LazyComponent implements OnInit {
     constructor(private lazyService: LazyService) {  }
   }

Есть идеи, как мне это решить?

Спасибо!

1 Ответ

0 голосов
/ 11 июля 2019

Ошибки круговой зависимости не имеют ничего общего с Angular.Это просто означает, что вы импортируете в бесконечном цикле, используя TypeScript.

Например;

a-service.ts 

import {B} from "./b-service';
export class A { b: B; };

b-service.ts 

import {A} from "./a-service';
export class B { a:A; };

Вы можете добиться того же объявления провайдера, просто добавив его в модуль.

my-service.ts

@Injectable()
export class MyService {}

lazy-module.ts 

import {MyService} from './my-service';

@NgModule({
   providers: [MyService]
})
export class LazyModule {}

Вышеописанное имеет тот же эффект, что и @Injectable({provideIn: LazyModule}).Это должно разорвать цепочку, возвращающуюся к LazyModule, но в некоторых случаях это не решает проблему.

Вместо этого используйте интерфейсы

Если вы застрялизатем вам нужно внедрить interface для службы и использовать его в компоненте или других неработающих ссылках.

my-service-interface.ts 

export const MY_SERVICE: InjectionToken<IMyService> = new InjectionToken<IMyService>('MY_SERVICE');

export interface IMyService {
   // methods
}

my-service.ts 

@Injectable()
export class MyService implements IMyService {
}

lazy-module.ts 

@NgModule({
    providers: [
       {provide: MY_SERVICE, useClass: MyService}
    ]
})
export class LazyModule {}

my-component.ts 

@Component({...})
export class MyComponent {
    constructor(@Inject(MY_SERVICE) service: IMyService) {
         // no circular references using just an interface
    }
}
...