CODEWITHSUNDEEP
angularangular2-directivesangular2-services
Rhushikesh
Rhushikesh

Reputation: 3700

No provider for serviceName! (componentName -> ServiceName)

I am working on on angular2 app. I have wrote a service to hold the data which will available through out the app on any component and update it.

here is my GlobalDataService .ts

import {Component, View, Inject} from 'angular2/core';
export class GlobalDataService {
    devIsLogin: boolean;
    dev: {};
    constructor(){
        this.devIsLogin=false;
    }
}

here is my bootstrap.ts

//import {bootstrap} from 'angular2/angular2';
///<reference path="../node_modules/angular2/typings/node/node.d.ts" />
import {UpgradeAdapter} from 'angular2/upgrade';
import {bootstrap} from 'angular2/platform/browser';
import {ROUTER_PROVIDERS} from 'angular2/router';
import {HTTP_PROVIDERS} from 'angular2/http';


import {AppComponent} from './components/app/app';
import {LoginService} from './services/loginService';
import {HttpService} from './services/httpServices';
import {GlobalDataService} from './services/GlobalDataService';

bootstrap(AppComponent, [HTTP_PROVIDERS, ROUTER_PROVIDERS, LoginService, HttpService, GlobalDataService]);

i have inject the GlobalDataService appComponent. to have single instance through out the application.

here is my appcomponent which try to access the globalDataService

import {Component, View, Inject} from 'angular2/core';
import {NgIf} from 'angular2/common';
import {Router, RouteConfig, RouterLink, RouterOutlet, ROUTER_PROVIDERS} from 'angular2/router';


import {HomeComponent} from '../home/home';
import {LoginComponent} from '../login/login';
import {GlobalDataService} from '../../services/globalDataService';


@Component({
    selector: 'app',
})
@View({
    templateUrl: '/scripts/src/components/app/app.html',
    directives: [RouterLink, RouterOutlet, NgIf]
})
export class AppComponent {
    devIsLogin: boolean;
    Dev: {};
    constructor(
        @Inject(Router) router: Router,
        @Inject(GlobalDataService) globalDataService: GlobalDataService
    ) {
        this.devIsLogin = false;
        globalDataService.devIsLogin=false;
        router.config([
            { path: '', component: HomeComponent, as: 'Home' },
            { path: '/login', component: LoginComponent, as: 'Login' }
        ]);
    }
}

but when i run my app its gives me error

enter image description here

Please correct what i missing here.

Upvotes: 2

Views: 885

Answers (2)

Gaurav Mukherjee
Gaurav Mukherjee

Reputation: 6335

Check if you are using GlobalDataService in LoginService or HttpService. In that case try with putting it before LoginService and HttpService

Upvotes: 0

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657731

The @Injectable() annotation is missing from your service class

@Injectable() // <== missing
export class GlobalDataService {
    devIsLogin: boolean;
    dev: {};
    constructor(){
        this.devIsLogin=false;
    }
}

See also https://angular.io/docs/ts/latest/guide/dependency-injection.html

I would also remove @Inject(GlobalDataService)

  • When @Inject() is not present, [Injector] will use the type annotation of the parameter.

Upvotes: 1

Related Questions