CODEWITHSUNDEEP
angular
noobProgrammer
noobProgrammer

Reputation: 2994

Service instance is not available for child component in angular2

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.NgZoneImpl.inner.inner.fork.onInvokeTask (http://localhost:58056/libs/@angular/core/src/zone/ng_zone_impl.js:36:41) at ZoneDelegate.invokeTask (http://localhost:58056/libs/zone.js/dist/zone.js:355:43) at Zone.runTask (http://localhost:58056/libs/zone.js/dist/zone.js:256:48) at drainMicroTaskQueue (http://localhost:58056/libs/zone.js/dist/zone.js:474:36) at XMLHttpRequest.ZoneTask.invoke (http://localhost:58056/libs/zone.js/dist/zone.js:426:22)consoleError @ zone.js:463_loop_1 @ zone.js:490drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426

Upvotes: 4

Views: 4144

Answers (2)

yurzui
yurzui

Reputation: 214305

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 enter image description here

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

enter image description here

Despite the fact that key exists in Map object.

enter image description here

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

Upvotes: 5

Thierry Templier
Thierry Templier

Reputation: 202326

I think you do something the right way to specify your providers when bootstrapping your application.

You probably don't import correctly your service in the boot module. You could check that categoryService isn't undefined here:

import { categoryService } from './something';

console.log(categoryService); // <-----

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

Upvotes: 1

Related Questions