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 NoProviderE

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

Answer 2

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
]);