Angular 多个注入对象的错误导致“[object Object] 没有提供程序

Question

我一直在尝试设置一个 Angular 4 应用程序。我多年没有从事 Web 前端工作，所以我可能会做一些明显愚蠢的事情。将不胜感激。

我有一个使用注入令牌的配置对象。我有两项服务在使用它。一个接受一个参数：

constructor(@Inject(APP_CONFIG) private config: AppConfig) {
  this.requestUrl = this.config.restRoot + listPresentationsUrl;
}

另一个服务得到进一步开发，正在使用 HttpClient 从服务器拉取数据。但是构造函数：

constructor (@Inject(APP_CONFIG) private config: AppConfig, private web: HttpClient) {
this.requestUrl = config.restRoot + listDecksUrl;
}

导致了我不期望的错误。组件使用此服务来获取数据。一旦我在上面的构造函数中使用了两个参数，我就会收到 no provider for [object Object]! 错误。触发它的组件是使用该服务的组件。如果我使用两个参数之一，应用程序不会触发错误。

有什么建议吗？完整的类如下 - 我已经从 onInit 中删除了一些代码，但这对错误没有影响（这是我触发错误的最少代码）。

组件 (decklist.component.ts)

import { Component, OnInit } from '@angular/core';
import { DecksService } from './decks.service';
import { Deck } from './deck.model';

@Component({
  selector: 'slides-decks',
  templateUrl: './decklist.component.html',
  styleUrls: ['./decklist.component.css']
})
export class DeckListComponent implements OnInit {

  presentations: Deck[];
  constructor(private deckService: DecksService) {}


  ngOnInit(): void {
  }

}

服务（decks.service.ts）

import { Injectable, Inject } from '@angular/core';
import { Deck } from './deck.model';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/do';

import { AppConfig, APP_CONFIG, SLIDESHOW_CONFIG } from './../shared/app.config';

const listDecksUrl: string = 'list-decks';

@Injectable()
export class DecksService {

    private requestUrl: string;

    constructor (@Inject(APP_CONFIG) private config: AppConfig, private http: HttpClient) {
        this.requestUrl = this.config.restRoot + listDecksUrl;
    }

    listDecks(): Observable<Deck[]> {
        return this.http.get<Deck[]>(this.requestUrl);
    }

}

共享应用配置（app.config.ts）

import { InjectionToken } from '@angular/core';

export let APP_CONFIG = new InjectionToken<AppConfig>('app.config');

export interface AppConfig {
  username: string;
  password: string;
  restRoot: string;
}

export const SLIDESHOW_CONFIG: AppConfig = {
    username: '**********',
    password: '**********',
    restRoot: 'http://localhost:8070/api'
};

错误是：

错误：[object Object] 没有提供者！在注入错误（核心。es5.js:1169）在 noProviderError（核心。es5.js:1207）在 ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_.throwOrNull (core.es5.js:2649) 在 ReflectiveInjector.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_.getByKeyDefault (core.es5.js :2688) 在 ReflectiveInjector.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_.getByKey (core.es5.js :2620) 在 ReflectiveInjector.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_.get (core.es5.js:2489) 在 resolveNgModuleDep（核心。es5.js:9481）在 _callFactory（核心。es5.js:9556）在 _createProviderInstance$1（核心。es5.js:9495）在 resolveNgModuleDep（核心。es5.js:9477）

Answer 1

郑重声明，这是一个完全不同模块中的拼写错误。 Angular 有时会出现意外错误。

Angular 多个注入对象的错误导致“[object Object] 没有提供程序

Angular error with multiple injected objects causes "no provider for [object Object]

angular

typescript

constructor

constructor-injection