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

Question

I've been trying to set up an Angular 4 application. I'm many years out of practice with web front end work so I may be doing something obviously stupid. Help would be appreciated.

I have a configuration object that uses an injection token. I have two services using it. One takes a single parameter:

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

The other service is further developed and is using the HttpClient to pull data from the server. However the constructor:

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

causes an error I don't expect. This service is used by a component to get data. As soon as I use both arguments in the constructor above I get a no provider for [object Object]! error. The component triggering it is the one using the service. If I use one of the two arguments the application doesn't trigger the error.

Any suggestions? The full classes are below - I have removed some code from onInit but it makes no difference to the error (this is my minimal code to trigger the error).

The component (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 {
  }

}

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

}

The shared app configuration (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'
};

The error is:

Error: No provider for [object Object]! at injectionError (core.es5.js:1169) at noProviderError (core.es5.js:1207) at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_.throwOrNull (core.es5.js:2649) at ReflectiveInjector.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_.getByKeyDefault (core.es5.js:2688) at ReflectiveInjector.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_.getByKey (core.es5.js:2620) at ReflectiveInjector.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_.get (core.es5.js:2489) at resolveNgModuleDep (core.es5.js:9481) at _callFactory (core.es5.js:9556) at _createProviderInstance$1 (core.es5.js:9495) at resolveNgModuleDep (core.es5.js:9477)

Answer 1

For the record, it was a typo in a totally different module. Angular sometimes gives unexpected errors.