问题
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
回答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());
}
回答2:
There is no need to inject Headers. Just create it with
let headers = new Headers();
来源：https://stackoverflow.com/questions/36714525/exception-no-provider-for-headers-app-api-headers