consume Services from core module in app.component

Question

Hi im new at angular 2 and Im trying to put in place all the things I have learned in angular.io. The problem is that I have readed about the core module, services, injectables ... and

If I have lets say a core-module like this:

import { NgModule } from '@angular/core';
import { LoggerService } from './services/logger.service';

@NgModule({
    exports: [
        //components
        LoggerComponent,
    ],
    declarations: [LoggerComponent],
    providers: [LoggerService],
})
export class CoreModule { }

and a simple app.module like:

import { CoreModule } from './core/core.module';
import { AppComponent } from './app.component';

@NgModule({
    imports: [
        CoreModule,
        BrowserModule,
        HttpModule,
        routerModule,
    ],
    declarations: [
        AppComponent,
    ],
    providers: [],
    bootstrap: [AppComponent],
})
export class AppModule { }

How can I use the LoggerService service exported for the core-module? i have to

import {LoggerService} from './core/services';

in my app.component? because in the contructor of app.component its not working

constructor(logger: LoggerService){}

what Im missing? thanks!

Angular is using hierarchical injection, if you need to use the service in a different module you'll have to list it as a provider as it is only in service in that module (and on down inside of it) where you have listed it as a provider. At least, that's what I remember from the top of my head. https://angular.io/docs/ts/latest/guide/hierarchical-dependency-injection.html — silentsod, Dec 15 '16 at 19:44
Hm, I have a plunker running and it looks like I'm wrong. I'll answer below. — silentsod, Dec 15 '16 at 20:11

score 0 · Accepted Answer · answered Dec 15 '16 at 20:15

From the ngModule documentation

providers : Provider[] Defines the set of injectable objects that are available in the injector of this module.

In other words, providers will be internal to the module and not outwardly exposed. Further reading in the documentation shows that only directives/pipes/(components) are applicable to export/declare.

So, to resolve this, you would need to directly reference the service in your higher level module, note that it will correctly use the singly instantiated service in your core module which is pretty cool and breaks my expectation.

app.module.ts

import {LoggerService} from './core/services';

@NgModule({<...>, providers: [<...>, LoggerService]})<...>

If you are going to have a bunch of shared services than using a barrel where you list all of them and do a one time import would be a reasonable approach.

Here's the functioning demo

I was testing and found out that, if you **don't add the LoggerService to the providers:[]** in the app.module.ts works just fine. :). thanks — JesLopov, Dec 16 '16 at 21:34
This is incorrect. It will result in duplicate service instances. You can leave the providers declaration in the core module. — Aluan Haddad, Dec 18 '16 at 20:00

consume Services from core module in app.component

1 Answers1