![](/img/trans.png)
[英]What to set for providedIn, if Angular service is used in 2 lazy loaded modules
[英]Angular dependency with “providedIn” in lazy loading modules
我以Angular“延遲加載功能模塊”為例: live demo
CustomersModule是一個延遲加載模塊,我在客戶模塊中創建了一個測試服務。
const routes: Routes = [
{
path: 'customers',
loadChildren: () => import('./customers/customers.module').then(m => m.CustomersModule)
},
{
path: 'orders',
loadChildren: () => import('./orders/orders.module').then(m => m.OrdersModule)
},
{
path: '',
redirectTo: '',
pathMatch: 'full'
}
];
import { Injectable } from '@angular/core';
@Injectable()
export class TestService {
constructor() { }
getHeroes() { return "HEROES"; }
}
在 CustomersModule 中,將其添加到提供程序:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CustomersRoutingModule } from './customers-routing.module';
import { CustomersComponent } from './customers.component';
import {TestService} from "./test.service";
@NgModule({
imports: [
CommonModule,
CustomersRoutingModule
],
providers: [
TestService
],
declarations: [CustomersComponent]
})
export class CustomersModule { }
CustomersModule 也有一個CustomersComponent ,通過這種方式我可以在其中使用 TestService。
import { Component, OnInit } from '@angular/core';
import {TestService} from "./test.service";
@Component({
selector: 'app-customers',
templateUrl: './customers.component.html',
styleUrls: ['./customers.component.css']
})
export class CustomersComponent implements OnInit {
testService: TestService;
constructor(test: TestService) {
this.testService = test;
}
ngOnInit() {
}
test(){
console.log(this.testService.getHeroes());
}
}
但是當我從CustomersModule的提供者數組中刪除TestService並在TestService中使用providedIn時:
import { Injectable } from '@angular/core';
import {CustomersModule} from "./customers.module";
@Injectable({
providedIn: CustomersModule
})
export class TestService {
constructor() { }
getHeroes() { return "HEROES"; }
}
我收到了這個錯誤:
core.js:6228 ERROR Error: Uncaught (in promise): ReferenceError: Cannot access 'CustomersModule' before initialization
ReferenceError: Cannot access 'CustomersModule' before initialization
at Module.CustomersModule (customers.component.ts:9)
at Module../src/app/customers/test.service.ts (test.service.ts:5)
at __webpack_require__ (bootstrap:84)
at Module../src/app/customers/customers.component.ts (customers-customers-module.js:78)
at __webpack_require__ (bootstrap:84)
at Module../src/app/customers/customers-routing.module.ts (customers-customers-module.js:29)
at __webpack_require__ (bootstrap:84)
at Module../src/app/customers/customers.module.ts (customers.component.ts:9)
at __webpack_require__ (bootstrap:84)
at ZoneDelegate.invoke (zone-evergreen.js:364)
at resolvePromise (zone-evergreen.js:798)
at resolvePromise (zone-evergreen.js:750)
at zone-evergreen.js:860
at ZoneDelegate.invokeTask (zone-evergreen.js:399)
at Object.onInvokeTask (core.js:41632)
at ZoneDelegate.invokeTask (zone-evergreen.js:398)
at Zone.runTask (zone-evergreen.js:167)
at drainMicroTaskQueue (zone-evergreen.js:569)
我知道這里有循環依賴,對於急切加載的模塊,它可以工作,並且會啟用 tree-shaking。 這是否意味着在延遲加載模塊中只能在 NgModule 中使用提供者數組?
有這方面的指導方針/最佳做法嗎?
肯定有循環依賴,看起來像這樣
CustomersComponent -> TestService -> CustomersModule -> CustomersComponent -> TestService
這就是為什么您會收到此異常的原因, CustomersModule and TestService
相互注入,因此將其注入提供程序數組(而不是提供的 In)中,將執行相同的操作,因此撤消您的更改並將TestService
保留在提供程序數組中。 Angular 將像對providedIn
的屬性一樣優化它
試試這樣。
@Injectable({
providedIn: 'root'
})
如果您仍然遇到任何問題,請告訴我。
看到這個問題。 在這方面,providedIn 屬性非常令人困惑。
這是否意味着在延遲加載模塊中只能在 NgModule 中使用提供者數組?
是的,所以,不幸的是,對於延遲加載的模塊,搖樹是不可能的。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.