typescript - Angular-fel med flera injicerade objekt orsakar "ingen provider för [object Object]"


Jag har försökt sätta upp en Angular 4-applikation. Jag har inte arbetat med webbfrontar på många år, så jag kan göra något uppenbart dumt. Hjälp skulle uppskattas.

Jag har ett konfigurationsobjekt som använder en injektionstoken. Jag har två tjänster som använder det. Den ena tar ett enda parameter:

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

Den andra tjänsten är vidareutvecklad och använder HttpClient för att hämta data från servern. Men konstruktorn:

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

orsakar ett fel som jag inte förväntar mig. Denna tjänst används av en komponent för att hämta data. Så snart jag använder båda argumenten i konstruktorn ovan får jag ett no provider for [object Object]!-fel. Komponenten som utlöser det är den som använder tjänsten. Om jag använder ett av de två argumenten orsakar applikationen inte felet.

Några förslag? Kompletta klasser finns nedan - jag har tagit bort viss kod från onInit men det gör ingen skillnad för felet (detta är min minimala kod för att utlösa felet).

Komponenten (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 {
  }

}

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

}

Den delade app-konfigurationen (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'
};

Felet är:

Fel: Ingen leverantör för [object Object]! vid injectionError (core.es5.js:1169) vid noProviderError (core.es5.js:1207) vid ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_.throwOrNull (core.es5.js:2649) vid ReflectiveInjector.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_.getByKeyDefault (core.es5.js:2688) vid ReflectiveInjector.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_.getByKey (core.es5.js:2620) vid ReflectiveInjector.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_.get (core.es5.js:2489) vid resolveNgModuleDep (core.es5.js:9481) vid _callFactory (core.es5.js:9556) vid _createProviderInstance$1 (core.es5.js:9495) vid resolveNgModuleDep (core.es5.js:9477)

Svar #1

För protokollet, det var ett stavfel i en helt annan modul. Angular ger ibland oväntade fel.