ReflectiveInjector throws InvalidProviderError

Question

I am trying to inject 2 services into generic classes using ReflectiveInjector as seen in this SO

The first time I call ReflectiveInjector on DebugService it works completely fine, however if I then replace this with CourseService, I recieve the following InvalidProviderError:

Uncaught InvalidProviderError_nativeError: Error: Invalid provider - only instances of Provider and Type are allowed, got: undefined

---

This is the generic class where I am trying to inject the services.

Media.ts

////////////////////////////////////////////////////////////////////////////////////////
import { ReflectiveInjector }                       from '@angular/core';
// other imports
////////////////////////////////////////////////////////////////////////////////////////
import { CourseService , DebugService }             from 'app/services';
//other imports
////////////////////////////////////////////////////////////////////////////////////////


export class Media {
    private sanitizer: DomSanitizer;
    private courseService: CourseService;
    private debug: DebugService;

    constructor(_audio: File[], _images: File[], _videos: File[] ) {
        // works fine
        var injector = ReflectiveInjector.resolveAndCreate([DebugService]);
        this.debug = injector.get(DebugService);

        // throws InvalidProviderError
        var injector2 = ReflectiveInjector.resolveAndCreate([CourseService]); 
        this.courseService = injector2.get(CourseService);
    }

---

The 2 services are as follows:

debug.service.ts

////////////////////////////////////////////////////////////////////////////////////////
import { Injectable }           from '@angular/core';
////////////////////////////////////////////////////////////////////////////////////////
import { environment }          from '../../environments/environment';
////////////////////////////////////////////////////////////////////////////////////////

@Injectable()
export class DebugService {
    constructor() {
        /*stuff*/
    }
}

course-service.service.ts

////////////////////////////////////////////////////////////////////////////////////////
import { Injectable, EventEmitter, Output }                from '@angular/core';
import { Router }                                          from '@angular/router';
import { Title, DomSanitizer, SafeResourceUrl, SafeUrl}    from '@angular/platform-browser';
////////////////////////////////////////////////////////////////////////////////////////
import { DebugService }                                    from 'app/services';
////////////////////////////////////////////////////////////////////////////////////////


@Injectable()
export class CourseService {

    @Output() preloadData = new EventEmitter<any>();

    // Constructor 1 - called on instantiation of class
    constructor(
        private sanitizer: DomSanitizer,
        private router: Router,
        private titleService: Title,
        private debug: DebugService
    ) { /*stuff*/ }

---

These services were successfully being used in the Media class prior, when I was manually passing CourseService and DebugService as params to the Media constructor, however wanted to get away from this as it seemed very 'clunky' compared to this more streamlined approach.

i.e.

export class Media {
    /*stuff*/
    constructor(_audio: File[], _images: File[], _videos: File[], _courseService: CourseService, _debugService: DebugService ) { /*stuff*/ }
}

Media is currently defined within another class's constructor:

var preloader = new Preloader(
    new Media(
        // Audio Files
        [
            new File(0, './app/assets/video/Example1.mp3')
        ],
        // Image Files
        [

        ],
        // Video Files
        [
            new File(0, './app/assets/video/Example1.mp4')
        ]
    )
//...