WYJĄTEK: Brak dostawcy dla nagłówków! (Aplikacja -> Api -> Nagłówki)

Question

Po prostu nie mogę zrozumieć, dlaczego wciąż mam problem z brakującym nagłówkiem.

Moi 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)); 
}); 

Moi 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!') 
      }); 
    } 
} 

Moje usługi api.ts:

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()); 
    } 
} 

Pełna błąd:

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

Klasa Headers nie może zostać wstrzyknięta. Trzeba oznacz ją przez własne:

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

Nie ma potrzeby, aby wstrzyknąć Headers. Wystarczy utworzyć go

let headers = new Headers();