Angular2 no provider for service error
<p>From <a href="https://stackoverflow.com/questions/35206821/angular2-access-global-service-without-including-it-in-every-constructor">Angular2 access global service without including it in every constructor</a> I have grabbed the code and slightly modified it into:</p>

<pre><code>@Injectable()
export class ApiService {
  constructor(public http: Http) {}

  get(url: string) {
    return http.get(url);
  }

}

@Injectable()
export abstract class BaseService {
  constructor(protected serv: ApiService) {}  
}

@Injectable()
export class MediaService extends BaseService {

  // Why do we need this?
  constructor(s: ApiService) {
    super(s)
  }

  makeCall() {
    this.serv.get("http://www.example.com/get_data")
  }

}
</code></pre>

<p>However, when I try to run this code I get an error in the console:</p>

<blockquote>
  <p>NoProviderError {message: "No provider for ApiService! (App ->
  MediaService -> ApiService)", stack: "Error: DI Exception↵</p>
</blockquote>

<p>I have created a Plunkr with the code at <a href="https://plnkr.co/edit/We2k9PDsYMVQWguMhhGl" rel="noreferrer">https://plnkr.co/edit/We2k9PDsYMVQWguMhhGl</a></p>

<p>Does anyone know what causes this  error?</p>