具有"providedIn"的角度依赖性在延迟加载模块中 [英] Angular dependency with "providedIn" in lazy loading modules

问题描述

我以Angular延迟加载功能模块"为例:实时演示

I am using Angular "Lazy-loading feature modules" as an example: live demo

CustomersModule 是一个延迟加载模块，我在客户模块中创建了一个测试服务.

CustomersModule is a lazy loading module i create a test service in customer module.

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中，将其添加到提供程序:

in CustomersModule, add it to providers:

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.

CustomersModule also has a CustomersComponent, by this way i can use TestService in it.

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());
  }
}

但是当我从CustomerModule的provider数组中删除TestService并在TestService中使用providerIn时:

but when i remove the TestService from providers array of CustomersModule and use providedIn in TestService:

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)

我知道这里有循环依赖性，对于渴望加载的模块，它可以工作并且将启用树状摇动.这是否意味着在延迟加载模块中，只能在NgModule中使用provider数组?

I know there is circular dependecny here, for eagerly loaded modules it works and will enable tree-shaking. Does it mean in lazy loading modules only providers array can be used in NgModule?

是否有相关准则/最佳做法?

are there guidelines/best practice for this?

推荐答案

请参见此问题.在这方面，providerIn属性非常令人困惑.

See this issue. The providedIn property is extremely confusing in this aspect.

这是否意味着在延迟加载模块中只能在NgModule中使用provider数组?

Does it mean in lazy loading modules only providers array can be used in NgModule?

是的，不幸的是，使用延迟加载的模块无法进行树状摇动.

Yes, so, unfortunately, tree-shaking is out of the picture with lazy-loaded modules.

这篇关于具有"providedIn"的角度依赖性在延迟加载模块中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！