Angular 5：无法解析 e 的所有参数：（？）

Question

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

但是，我不断收到“无法解析 [服务名称] 的所有参数：(?)”的交替错误。和“无法解析 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 { }

问题与某处的喷油器有关，但我不确定该去哪里。我一直在循环交替出现相同的两个错误。

据我了解，我没有使用任何桶，所以理想情况下它不应该是进口订购问题。

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

编辑：“OtherLoggerService”和“AnotherService”都是从我用 npm 安装的包中引入的服务，所以我不会在这里发布它们的内容。但是，如果我在使用它们的过程中可以学习或需要记住什么，请分享您的 cmets。

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

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

Answer 1

我想通了！

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

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

我从@A/AServices 导入的服务称为AnotherService，在我的例子中实际上包含在根模块级别，在这个例子中我没有亲自编写或查看的文件中。 （就我而言，来自@A/AServices 的所有服务都已包含在根模块中。）为了解决我的问题，我只是从providers 数组中删除了AnotherService。

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

即使我在模块级别从providers 数组中删除了它们，并且还删除了MyModule 中的导入语句，我仍然能够在MyComponent 中使用它们，并且仍然需要在@ 中导入它们987654334@，正常。

这是我更新的代码：

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 导入，因为我将它注入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 { }

我还想提醒任何未来的读者，我在概述 constructor 和 MyLoggerService 和 MyComponent 中的参数时使用 @Inject(forwardRef(() => ServiceName)) 是由于我所提供的服务的技术要求使用我的 npm 包 @A/AServices，对于我自己创建的任何服务，当我将服务包含在构造函数中时，我不需要使用这个 forwardRef 方法。