Angular 2 No Provider for LoadingService

Question

I've already read similar questions regarding this on StackOverflow, but they don't seem to be working for my situation. I'm on the most recent version of Angular.

Loader Component

import {Component, ElementRef, OnInit, OnDestroy} from '@angular/core';
import {CORE_DIRECTIVES} from "@angular/common";
import {LoadingService} from "../../services/global/loadingService";

@Component({
    selector: 'loader',
    directives: [CORE_DIRECTIVES],
    providers: [LoadingService],
    template: `
    <div class ="blue"></div>
    `,
})

export class LoadingComponent {
  public active: boolean;

  public constructor(spinner: LoadingService) {
    spinner.status.subscribe((status: boolean) => {
      this.active = status;
    });
  }
}

Loader Service

import {Injectable} from '@angular/core';
import {Subject} from 'rxjs/Subject';
import 'rxjs/add/operator/share';

@Injectable()
export class LoadingService {
  public status: Subject<any> = new Subject();
  private _active: boolean = false;

  public get active(): boolean {
    return this._active;
  }

  public set active(v: boolean) {
    this._active = v;
    this.status.next(v);
  }

  public start(): void {
    this.active = true;
  }

  public stop(): void {
    this.active = false;
  }
}

My error is: Error: Uncaught (in promise): No provider for LoadingService

Any help would be greatly appreciated. Thank you

Answer 1

There is nothing wrong with the code you posted here. I put it in my project and it loads without any issues. Your issue is most likely your SystemJS configuration or some other issue that prevents the app from loading correctly, and therefore can't resolve how to inject your LoadingService. Use Chrome's dev tools to look at the console when the app loads and see if it shows you any other issues. Alternatively, post your full non-working sample somewhere we can actually see all the code (like Plunkr, or JSFiddle).

Answer 2

I faced a similar issue and solved it by importing the service in the providers specified in app.module.ts