Question

我正在使用Angular 8的简单应用程序，具有一个延迟加载的模块和一个提供的服务。In：'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（由我猜想提供了
懒惰模块依赖于懒惰路由模块（因为路由文件已导入其模块中）
惰性路由模块对某些组件有依赖性，因为例如，如果route为”，我会急于加载某些组件
该组件具有lazy.service依赖性，因为它已注入构造函数中...

我正在尝试在Stackblitz上进行复制，但是又遇到另一个错误：没有LazyService的提供者！

Lazy.Service.ts

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

惰性路由模块

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

有什么想法可以解决这个问题吗？

谢谢！

Answer 1

圆形依赖关系错误与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，并在 component 或其他破坏性引用中使用它。

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

Angular获得了循环依赖项检测警告，当使用带有providerIn：LazyModule的服务时

1 个答案:

改为使用接口