javascript - Angular 5 : Can't Resolve All Parameters for e: (? )

Question

我在 Angular 5 中使用 angular-cli。我正在尝试创建一个使用另一个服务本身的服务。

但是，我不断收到“无法解析 [服务名称] 的所有参数:(?)”的交替错误。和“无法解析 e: (?, ?, ?, ?) 的所有参数。”

这是我的设置:

MyLoggerService

import { Injectable, Inject, forwardRef } from "@angular/core";
import { OtherLoggerService } from "@A/AServices";
// OtherLoggerService is from a package I installed via npm, so I won't include it here.

// I thought I was missing this @Injectable decorator, but adding it to my
//code gives me the e: (?, ?, ?, ?) error
//Without this @Injectable() line, I get the MyLoggerService: (?) error.
@Injectable() 
export class DMLoggerService extends {
    constructor(
        @Inject(forwardRef(() => OtherLoggerService)) private otherLoggerService: OtherLoggerService
    ) { }

    public logEvent(): void {
        this.otherLoggerService.logEvent();
    }
    public trackPageView(): void {
        this.otherLoggerService.trackPageView();
    }
}

我的组件

import { Component, Inject, forwardRef} from "@angular/core";
import { OtherLoggerService} from "@A/AServices";
import { MyLoggerService } from "../../common/services/mylogger.service";
import { AnotherService } from "@A/AServices";

@Component({
    selector: "my-component",
    templateUrl: "./my-component.component.html"
})
export class MyComponent{
    constructor(
        @Inject(forwardRef(() => MyLoggerService)) private myLoggerService: MyLoggerService,
        private anotherService: AnotherService
    ) {
        this.myLoggerService.trackPageView();
        this.anotherService.someFunc();
    }
}

我的模块

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { CommonModule } from "@angular/common";
import { OtherLoggerService} from "@A/AServices"; // Just added this per comments, but still receive the same errors
import { MyLoggerService } from "../../common/services/mylogger.service";
import { AnotherService } from "@A/AServices";

@NgModule({
    imports: [
        CommonModule
        BrowserModule
    ],
    declarations: [],
    providers: [OtherLoggerService, MyLoggerService, AnotherService]
    // Added OtherLoggerService to this array but still received errors
})
export class MyModule { }

问题与某处的注入(inject)器有关，但我不确定该去哪里。我一直在原地打转，交替出现同样的两个错误。

据我所知，我没有使用任何 Barrels，因此理想情况下它不应该是一个进口订购问题。

我看过类似的主题，但尚未找到任何可行的解决方案。

编辑:“OtherLoggerService”和“AnotherService”都是我用npm安装的包引入的服务，所以我不会在这里贴出它们的内容。但是，如果我在使用它们时有什么可以学习或需要牢记的地方，请分享您的评论。

编辑:在 MyModule 上添加了对 OtherLoggerService 的导入，但仍然收到错误。

编辑:尝试将 OtherLoggerService 添加到 MyModule 的 Providers 数组中，仍然收到错误。

Answer 1

我想通了!

类似于这个问题的回复和评论:Angular DI Error - EXCEPTION: Can't resolve all parameters

似乎我已经在我的代码中创建了一个循环依赖，其中包含了我在 MyModule 的 providers 数组中包含的不同服务。

我从 @A/AServices 导入的称为 AnotherService 的服务实际上包含在根模块级别，在我没有的文件中在这种情况下亲自撰写或查看。 (在我的例子中，来自 @A/AServices 的所有服务都包含在根模块中。)为了解决我的问题，我只是删除了 AnotherService 来 self 的 providers 数组。

同样，我也不需要包含 OtherLoggerService，因为它也是 @A/AServices 的一部分。

尽管我在模块级别从 providers 数组中删除了它们，并且还删除了 MyModule 中的导入语句，但我仍然能够在 中使用它们>MyComponent，并且仍然需要像往常一样将它们导入到 MyComponent 中。

这是我更新后的代码:

MyLoggerService(未更改)

import { Injectable, Inject, forwardRef } from "@angular/core";
import { OtherLoggerService } from "@A/AServices";

@Injectable() 
export class DMLoggerService extends {
    constructor(
        @Inject(forwardRef(() => OtherLoggerService)) private otherLoggerService: OtherLoggerService
    ) { }

    public logEvent(): void {
        this.otherLoggerService.logEvent();
    }
    public trackPageView(): void {
        this.otherLoggerService.trackPageView();
    }
}

MyComponent(删除了 OtherLoggerService 导入，因为我将其注入(inject)到 MyLoggerService 中，所以它已经包含在 MyLoggerService 中导入)

import { Component, Inject, forwardRef} from "@angular/core";
import { AnotherService} from "@A/AServices";
import { MyLoggerService } from "../../common/services/mylogger.service";

@Component({
    selector: "my-component",
    templateUrl: "./my-component.component.html"
})
export class MyComponent{
    constructor(
        private myLoggerService: MyLoggerService,
        @Inject(forwardRef(() => AnotherService)) private anotherService: AnotherService
    ) {
        this.myLoggerService.trackPageView();
        this.anotherService.someFunc();
    }
}

MyModule(删除了对 AnotherService 和 OtherLoggerService 的引用，因为它们包含在根模块中。还对 @NgModule 属性)

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { CommonModule } from "@angular/common";
import { MyLoggerService } from "../../common/services/mylogger.service";

@NgModule({
    imports: [
        CommonModule
        BrowserModule
    ],
    declarations: [MyComponent],
    providers: [MyLoggerService], // removed the services here that were causing the circular dependency
    exports: [MyComponent]
})
export class MyModule { }

我还想提醒 future 的读者，我在构造函数中概述参数时使用了@Inject(forwardRef(() => ServiceName)) MyLoggerService 和 MyComponent 是由于我从我的 npm 包 @A/AServices 使用的服务的技术要求，以及任何我自己创建的服务，当我在构造函数中包含该服务时，我不需要使用此 forwardRef 方法。