providedIn:LazyModule 失败,没有提供程序错误
providedIn: LazyModule fails with no provider error
我想将 providedIn
选项引用到提供可声明项和依赖项的 Angular 模块。我创建了一个附加模块 SharedModule
作为惰性模块 LazyModule
的子模块,以便它可以用作我想提供的惰性服务的“锚点”(CounterService
在我的例子中)。我一直在关注这个 guide 来实现它,但显然做错了什么。
此外,我做了一个小方案,但请查看 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; | |
| |} | |
| +----------------------------------+ |
| |
+--------------------------------------+
正如 article that you cited 提到的,您需要在其自己的模块中定义服务以避免循环依赖问题。
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
我想将 providedIn
选项引用到提供可声明项和依赖项的 Angular 模块。我创建了一个附加模块 SharedModule
作为惰性模块 LazyModule
的子模块,以便它可以用作我想提供的惰性服务的“锚点”(CounterService
在我的例子中)。我一直在关注这个 guide 来实现它,但显然做错了什么。
此外,我做了一个小方案,但请查看 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; | |
| |} | |
| +----------------------------------+ |
| |
+--------------------------------------+
正如 article that you cited 提到的,您需要在其自己的模块中定义服务以避免循环依赖问题。
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