angular - Service instance is not available for child component in angular2

Question

I have created some services which should be shared within whole application but for some reason child components are throwing error Error: DI Exception at NoProviderError.BaseException [as constructor] I have provided all the services inside boot file

bootstrap(AppComponent, [
    JwtHelper,
    HTTP_PROVIDERS, authervice, ROUTER_PROVIDERS, 
    categoryService,
    Configuration
]);

can anyone suggest something? if you need more explanation or code let me know.

category component

import ...
import {categoryService}       from './categoryService';
@Component({
    selector: 'category-list',
    template: `...`,
    directives: [],
    styles: ['.error {color:red;}'],
    providers: []

})
export class categoryComponent implements OnInit {
    constructor(private _categoryService: categoryService) { }
    ...
}

If i add categoryservice in providers above it works otherwise throws error

complete error

EXCEPTION: Error: Uncaught (in promise): EXCEPTION: Error in :0:0 ORIGINAL EXCEPTION: No provider for categoryService! ORIGINAL STACKTRACE: Error: DI Exception at NoProviderError.BaseException [as constructor] (http://localhost:58056/libs/@angular/core/src/facade/exceptions.js:17:23) at NoProviderError.AbstractProviderError [as constructor] (http://localhost:58056/libs/@angular/core/src/di/reflective_exceptions.js:39:16) at new NoProviderError (http://localhost:58056/libs/@angular/core/src/di/reflective_exceptions.js:75:16) at ReflectiveInjector_._throwOrNull (http://localhost:58056/libs/@angular/core/src/di/reflective_injector.js:776:19) at ReflectiveInjector_._getByKeyDefault (http://localhost:58056/libs/@angular/core/src/di/reflective_injector.js:804:25) at ReflectiveInjector_._getByKey (http://localhost:58056/libs/@angular/core/src/di/reflective_injector.js:767:25) at ReflectiveInjector_.get (http://localhost:58056/libs/@angular/core/src/di/reflective_injector.js:576:21) at ElementInjector.get (http://localhost:58056/libs/@angular/core/src/linker/element_injector.js:23:48) at ElementInjector.get (http://localhost:58056/libs/@angular/core/src/linker/element_injector.js:23:48) at ReflectiveInjector_._getByKeyDefault (http://localhost:58056/libs/@angular/core/src/di/reflective_injector.js:801:24) ERROR CONTEXT: [object Object] zone.js:461 Unhandled Promise rejection: EXCEPTION: Error in :0:0 ORIGINAL EXCEPTION: No provider for categoryService! ORIGINAL STACKTRACE: Error: DI Exception at NoProviderError.BaseException [as constructor] (http://localhost:58056/libs/@angular/core/src/facade/exceptions.js:17:23) at NoProviderError.AbstractProviderError [as constructor] (http://localhost:58056/libs/@angular/core/src/di/reflective_exceptions.js:39:16) at new NoProviderError (http://localhost:58056/libs/@angular/core/src/di/reflective_exceptions.js:75:16) at ReflectiveInjector_._throwOrNull (http://localhost:58056/libs/@angular/core/src/di/reflective_injector.js:776:19) at ReflectiveInjector_._getByKeyDefault (http://localhost:58056/libs/@angular/core/src/di/reflective_injector.js:804:25) at ReflectiveInjector_._getByKey (http://localhost:58056/libs/@angular/core/src/di/reflective_injector.js:767:25) at ReflectiveInjector_.get (http://localhost:58056/libs/@angular/core/src/di/reflective_injector.js:576:21) at ElementInjector.get (http://localhost:58056/libs/@angular/core/src/linker/element_injector.js:23:48) at ElementInjector.get (http://localhost:58056/libs/@angular/core/src/linker/element_injector.js:23:48) at ReflectiveInjector_._getByKeyDefault (http://localhost:58056/libs/@angular/core/src/di/reflective_injector.js:801:24) ERROR CONTEXT: [object Object] ; Zone: angular ; Task: Promise.then ; Value: ViewWrappedException {_wrapperMessage: "Error in :0:0", _originalException: NoProviderError, _originalStack: "Error: DI Exception? at NoProviderError.BaseExc…ngular/core/src/di/reflective_injector.js:801:24)", _context: DebugContext, _wrapperStack: "Error: Error in :0:0? at ViewWrappedException.W…localhost:58056/libs/zone.js/dist/zone.js:322:35)"}consoleError @ zone.js:461_loop_1 @ zone.js:490drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426 zone.js:463 Error: Uncaught (in promise): EXCEPTION: Error in :0:0 ORIGINAL EXCEPTION: No provider for categoryService! ORIGINAL STACKTRACE: Error: DI Exception at NoProviderError.BaseException [as constructor] (http://localhost:58056/libs/@angular/core/src/facade/exceptions.js:17:23) at NoProviderError.AbstractProviderError [as constructor] (http://localhost:58056/libs/@angular/core/src/di/reflective_exceptions.js:39:16) at new NoProviderError (http://localhost:58056/libs/@angular/core/src/di/reflective_exceptions.js:75:16) at ReflectiveInjector_._throwOrNull (http://localhost:58056/libs/@angular/core/src/di/reflective_injector.js:776:19) at ReflectiveInjector_._getByKeyDefault (http://localhost:58056/libs/@angular/core/src/di/reflective_injector.js:804:25) at ReflectiveInjector_._getByKey (http://localhost:58056/libs/@angular/core/src/di/reflective_injector.js:767:25) at ReflectiveInjector_.get (http://localhost:58056/libs/@angular/core/src/di/reflective_injector.js:576:21) at ElementInjector.get (http://localhost:58056/libs/@angular/core/src/linker/element_injector.js:23:48) at ElementInjector.get (http://localhost:58056/libs/@angular/core/src/linker/element_injector.js:23:48) at ReflectiveInjector_._getByKeyDefault (http://localhost:58056/libs/@angular/core/src/di/reflective_injector.js:801:24) ERROR CONTEXT: [object Object] at NoProviderError.BaseException [as constructor] (http://localhost:58056/libs/@angular/core/src/facade/exceptions.js:17:23) at NoProviderError.AbstractProviderError [as constructor] (http://localhost:58056/libs/@angular/core/src/di/reflective_exceptions.js:39:16) at new NoProviderError (http://localhost:58056/libs/@angular/core/src/di/reflective_exceptions.js:75:16) at ReflectiveInjector_._throwOrNull (http://localhost:58056/libs/@angular/core/src/di/reflective_injector.js:776:19) at ReflectiveInjector_._getByKeyDefault (http://localhost:58056/libs/@angular/core/src/di/reflective_injector.js:804:25) at ReflectiveInjector_._getByKey (http://localhost:58056/libs/@angular/core/src/di/reflective_injector.js:767:25) at ReflectiveInjector_.get (http://localhost:58056/libs/@angular/core/src/di/reflective_injector.js:576:21) at ElementInjector.get (http://localhost:58056/libs/@angular/core/src/linker/element_injector.js:23:48) at ElementInjector.get (http://localhost:58056/libs/@angular/core/src/linker/element_injector.js:23:48) at ReflectiveInjector_._getByKeyDefault (http://localhost:58056/libs/@angular/core/src/di/reflective_injector.js:801:24) ERROR CONTEXT: [object Object] at resolvePromise (http://localhost:58056/libs/zone.js/dist/zone.js:538:32) at http://localhost:58056/libs/zone.js/dist/zone.js:574:18 at ZoneDelegate.invokeTask (http://localhost:58056/libs/zone.js/dist/zone.js:356:38) at Object.NgZoneImp

Answer 1

SystemJs is case sensitive (by design). If you use different path name in your project files like this:

main.ts

import { categoryService } from './categoryService';

category-component.ts

import { categoryService } from './categoryservice';

then System js will make double imports

This way angular2 will find other instance of service object in providers Map keys.

Despite the fact that key exists in Map object.

has method of Map will return false. That's why you're receiving an error.

See also more information about key equality within Map object at this page https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Map#Key_equality