CODEWITHSUNDEEP
angularangular2-providers
FelipeDrumond
FelipeDrumond

Reputation: 64

Angular 2 angular2.dev.js:23925 EXCEPTION: Error: Uncaught (in promise): No provider for

I'm trying to load an Angular Service (DataService) which has a configuration file (datService.configuration) into a Component (Home). In my Home component, if I don't add DataServiceConfiguration to the providers list, I get the following error:

"Uncaught (in promise): No provider for DataServiceConfiguration! (Home -> DataService -> DataServiceConfiguration)"

dataService.ts:

import { Injectable } from 'angular2/core';
import { Http, Response, Headers, HTTP_PROVIDERS } from 'angular2/http';
import 'rxjs/add/operator/map'
import { Observable } from 'rxjs/Observable';
import { DataServiceConfiguration } from './dataService.configuration';

@Injectable()
export class DataService {

    private actionUrl: string;
    private headers: Headers;

    constructor(private _http: Http, private configuration: DataServiceConfiguration) {

        ...
    }

dataService.configuration.ts:

import { Injectable } from 'angular2/core';

@Injectable()
export class DataServiceConfiguration {
    public Server: string = "http://localhost/";
    public ApiPath: string = "api/v1/";
    public ApiUrl = this.Server + this.ApiPath;

    constructor() {
    }
}

Home.ts

import { DataService } from '../services/dataService';
import { DataServiceConfiguration } from '../services/dataService.configuration';

import {
    Headers,
    Http,
    HTTP_BINDINGS, 
    Request,
    RequestOptions,
    RequestOptionsArgs,
    HTTP_PROVIDERS
} from 'angular2/http';

@ng.Component({
  selector: 'home',
  templateUrl: './ng-app/components/public/home/home.html',
  directives: [AlbumTile, ProdutoTile, Promocao, SuperOfertas, Banner, Categorias, DestaquesDaHome],
  providers: [DataServiceConfiguration, DataService]
})
export class Home implements ng.OnInit {
    public lista: models.Lista;
    public pagina: number = 1;
    paginas: number = 1;

    constructor(private http: Http, private _dataService: DataService) {

    }
}

I don't understand why I need to add DataServiceConfiguration to my Home component, as my DataService already loads it. Is there any way to only add the DataService to my component?

Upvotes: 0

Views: 569

Answers (1)

Mark Rajcok
Mark Rajcok

Reputation: 364697

It is a bit strange, but only components can configure dependency injection in Angular (well, and bootstrap(), but that is essentially the same as the root component). I.e., only components can specify providers.

Each component in the component tree will get an associated "injector" if the component has a providers array specified. We can think of this like an injector tree, that is (normally much) sparser than the component tree. When a dependency needs to be resolved (by a component OR a service), this injector tree is consulted. The first injector that can satisfy the dependency does so. The injector tree is walked up, toward the root component/injector.

So, in order for your service to inject a configuration object dependency, that config object first has to be registered with an injector. I.e., in a component's providers array. This registration must occur somewhere at or above the component where you want to use/inject your service.

Your service should then be able to inject the registered config object, because it will find it in the injector tree.

See also Angular 2 - Including a provider in a service.

Upvotes: 2

Related Questions