EXCEPTION: No provider for Headers! (App -> Api -> Headers)

Question

Just cant figure out why I have still getting this missing Headers provider issue.

My bootstrap.ts:

import {enableProdMode, provide} from "angular2/core";
import {bootstrap, ELEMENT_PROBE_PROVIDERS} from 'angular2/platform/browser';
import {ROUTER_PROVIDERS, HashLocationStrategy, LocationStrategy} from 'angular2/router';
import {HTTP_PROVIDERS, HTTP_BINDINGS} from 'angular2/http';

const ENV_PROVIDERS = [];
// depending on the env mode, enable prod mode or add debugging modules
if (process.env.ENV === 'build') {
  enableProdMode();
} else {
  ENV_PROVIDERS.push(ELEMENT_PROBE_PROVIDERS);
}

/*
 * App Component
 * our top level component that holds all of our components
 */
import {App} from './app/app';

/*
 * Bootstrap our Angular app with a top level component `App` and inject
 * our Services and Providers into Angular's dependency injection
 */
document.addEventListener('DOMContentLoaded', function main() {
  return bootstrap(App, [
    // These are dependencies of our App
    ...HTTP_PROVIDERS,
    ...ROUTER_PROVIDERS,
    ...HTTP_BINDINGS,
    ...ENV_PROVIDERS,
    provide(LocationStrategy, {useClass: HashLocationStrategy}) // use #/ routes, remove this for HTML5 mode
  ])
  .catch(err => console.error(err));
});

My app.ts

import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {FORM_PROVIDERS} from 'angular2/common';
import {HTTP_PROVIDERS, HTTP_BINDINGS} from 'angular2/http';

import '../style/app.scss';

import {Api} from './services/api/api';
import {Home} from './components/home/home';
import {About} from "./components/about/about";

/*
 * App Component
 * Top Level Component
 */
@Component({
  selector: 'app', // <app></app>
  providers: [...FORM_PROVIDERS,HTTP_PROVIDERS, HTTP_BINDINGS, Api],
  directives: [...ROUTER_DIRECTIVES],
  pipes: [],
  styles: [require('./app.scss')],
  template: require('./app.html')
})
@RouteConfig([
  {path: '/', component: Home, name: 'Home'},
  {path: '/About', component: About, name: 'About'}
])
export class App {
  people: any;

  constructor(public api: Api) {
    api.people
            // .subscribe(
            //     people => this.people = people,
            //     error => console.error(error),
            //     () => console.log('Completed!')
            // );
            .subscribe({
                next: x => (this.people = x),
                error: e => console.error(e),
                complete: () => console.log('Completed!')
            });
  }
}

My api.ts service:

import {Injectable} from 'angular2/core';
import { Http, Headers } from 'angular2/http';

@Injectable()
export class Api {
  title: string = 'Angular 2';
  people: any;

  constructor(http: Http, headers: Headers) {
    headers.append('Content-Type', 'application/json');
    headers.append('Access-Control-Allow-Origin', '*');
    this.people = http.get('http://www.mocky.io/v2/5715f13a1100004d1187d9e1', { headers: headers })
      .map(response => response.json());
  }
}

Full error:

EXCEPTION: No provider for Headers! (App -> Api -> Headers)
VM30858:76 EXCEPTION: No provider for Headers! (App -> Api -> Headers)BrowserDomAdapter.logError @ VM30858:76BrowserDomAdapter.logGroup @ VM30858:86ExceptionHandler.call @ VM30692:56(anonymous function) @ VM30760:338ZoneDelegate.invoke @ VM30663:332NgZoneImpl.inner.inner.fork.onInvoke @ VM30762:44ZoneDelegate.invoke @ VM30663:331Zone.run @ VM30663:227(anonymous function) @ VM30663:576ZoneDelegate.invokeTask @ VM30663:365NgZoneImpl.inner.inner.fork.onInvokeTask @ VM30762:35ZoneDelegate.invokeTask @ VM30663:364Zone.runTask @ VM30663:263drainMicroTaskQueue @ VM30663:482ZoneTask.invoke @ VM30663:434
bootstrap.ts?6e9a:33 NoProviderError {message: "No provider for Headers! (App -> Api -> Headers)", stack: "Error: DI Exception↵    at NoProviderError.BaseExc…ost:8080/js/vendor.js:140:2), <anonymous>:704:21)", keys: Array[3], injectors: Array[3]}(anonymous function) @ bootstrap.ts?6e9a:33ZoneDelegate.invoke @ VM30663:332Zone.run @ VM30663:227(anonymous function) @ VM30663:576ZoneDelegate.invokeTask @ VM30663:365Zone.runTask @ VM30663:263drainMicroTaskQueue @ VM30663:482ZoneTask.invoke @ VM30663:434
VM30858:85 EXCEPTION: Error: Uncaught (in promise): No provider for Headers! (App -> Api -> Headers)
VM30858:76 EXCEPTION: Error: Uncaught (in promise): No provider for Headers! (App -> Api -> Headers)BrowserDomAdapter.logError @ VM30858:76BrowserDomAdapter.logGroup @ VM30858:86ExceptionHandler.call @ VM30692:56(anonymous function) @ VM30760:193schedulerFn @ VM30727:122SafeSubscriber.__tryOrUnsub @ VM30734:166SafeSubscriber.next @ VM30734:115Subscriber._next @ VM30734:74Subscriber.next @ VM30734:51Subject._finalNext @ VM30729:124Subject._next @ VM30729:116Subject.next @ VM30729:73EventEmitter.emit @ VM30727:111NgZone._zoneImpl.ng_zone_impl_1.NgZoneImpl.onError @ VM30761:119NgZoneImpl.inner.inner.fork.onHandleError @ VM30762:65ZoneDelegate.handleError @ VM30663:336Zone.runGuarded @ VM30663:244drainMicroTaskQueue @ VM30663:495ZoneTask.invoke @ VM30663:434
VM30858:76 STACKTRACE:BrowserDomAdapter.logError @ VM30858:76ExceptionHandler.call @ VM30692:58(anonymous function) @ VM30760:193schedulerFn @ VM30727:122SafeSubscriber.__tryOrUnsub @ VM30734:166SafeSubscriber.next @ VM30734:115Subscriber._next @ VM30734:74Subscriber.next @ VM30734:51Subject._finalNext @ VM30729:124Subject._next @ VM30729:116Subject.next @ VM30729:73EventEmitter.emit @ VM30727:111NgZone._zoneImpl.ng_zone_impl_1.NgZoneImpl.onError @ VM30761:119NgZoneImpl.inner.inner.fork.onHandleError @ VM30762:65ZoneDelegate.handleError @ VM30663:336Zone.runGuarded @ VM30663:244drainMicroTaskQueue @ VM30663:495ZoneTask.invoke @ VM30663:434
VM30858:76 Error: Uncaught (in promise): No provider for Headers! (App -> Api -> Headers)
    at resolvePromise (eval at <anonymous> (polyfills.js:615), <anonymous>:543:32)
    at eval (eval at <anonymous> (polyfills.js:615), <anonymous>:579:18)
    at ZoneDelegate.invokeTask (eval at <anonymous> (polyfills.js:615), <anonymous>:365:38)
    at Object.NgZoneImpl.inner.inner.fork.onInvokeTask (eval at <anonymous> (vendor.js:572), <anonymous>:35:41)
    at ZoneDelegate.invokeTask (eval at <anonymous> (polyfills.js:615), <anonymous>:364:43)
    at Zone.runTask (eval at <anonymous> (polyfills.js:615), <anonymous>:263:48)
    at drainMicroTaskQueue (eval at <anonymous> (polyfills.js:615), <anonymous>:482:36)
    at HTMLDocument.ZoneTask.invoke (eval at <anonymous> (polyfills.js:615), <anonymous>:434:22)BrowserDomAdapter.logError @ VM30858:76ExceptionHandler.call @ VM30692:59(anonymous function) @ VM30760:193schedulerFn @ VM30727:122SafeSubscriber.__tryOrUnsub @ VM30734:166SafeSubscriber.next @ VM30734:115Subscriber._next @ VM30734:74Subscriber.next @ VM30734:51Subject._finalNext @ VM30729:124Subject._next @ VM30729:116Subject.next @ VM30729:73EventEmitter.emit @ VM30727:111NgZone._zoneImpl.ng_zone_impl_1.NgZoneImpl.onError @ VM30761:119NgZoneImpl.inner.inner.fork.onHandleError @ VM30762:65ZoneDelegate.handleError @ VM30663:336Zone.runGuarded @ VM30663:244drainMicroTaskQueue @ VM30663:495ZoneTask.invoke @ VM30663:434
VM30663:469 Unhandled Promise rejection: No provider for Headers! (App -> Api -> Headers) ; Zone: angular ; Task: Promise.then ; Value: NoProviderError {message: "No provider for Headers! (App -> Api -> Headers)", stack: "Error: DI Exception↵    at NoProviderError.BaseExc…ost:8080/js/vendor.js:140:2), <anonymous>:704:21)", keys: Array[3], injectors: Array[3]}consoleError @ VM30663:469drainMicroTaskQueue @ VM30663:498ZoneTask.invoke @ VM30663:434
VM30663:471 Error: Uncaught (in promise): No provider for Headers! (App -> Api -> Headers)(…)consoleError @ VM30663:471drainMicroTaskQueue @ VM30663:498ZoneTask.invoke @ VM30663:434

Answer 1

The Headers class can't be injected. You need to instantiate it by your own:

constructor(http: Http) {
  let headers = new Headers();
  headers.append('Content-Type', 'application/json');
  headers.append('Access-Control-Allow-Origin', '*');
  this.people = http.get('http://www.mocky.io/v2/5715f13a1100004d1187d9e1', { headers: headers })
    .map(response => response.json());
}

Answer 2

There is no need to inject Headers. Just create it with

let headers = new Headers();