Lazy Loading in Angular 2

Question

I'm trying to configure my application to make use of Lazy Loaded Modules in RC5. This is the problem i'm running in to.

I have a module that uses RouterModule.forChild(router) and gets lazy loaded lets call it LevelOneModule. This module also has a few modules that get lazy loaded lets call them LevelTwoModule-s. This works for the most part but i have to mayor problems:

1. I provide a service in my LevelOneModule that i need to have as a singleton in LevelTwoModule-s but for some reason each LevelTwoModule has its own instance of the service.

Here is an example of the code:

LevelOneModule

@NgModule({
    imports: [
        SharedModule,
        levelOneRouter
    ],
    providers: [SomeService],
    declarations: [...]
})

LevelTwoModule:

@NgModule({
    imports: [
        SharedModule,
        levelTwoRouter
    ],
    providers: [],
    declarations: [...]
})

2. I want the LevelOneModule to register some declarations which i need available in multiple LevelTwoModule-s and i'm not quit sure how to achieve this.

If i just try to register the declarations in the LevelOneModule:

declarations: [SomeComponent, ANotherComponent]

I get the unrecognized element error, and if i try to register the declaration in each LevelTwoModule separately i get the is part of the declarations of 2 modules error.

I've also tried to make another SharedModule just for the LevelOneModule and that didn't work also.

Any help or info is greatly appreciated, just something to point me in the right direction.

Answer 1

Answer to question #1

You should ask LevelOneModule to register the singleton, you can do this by putting the required providers in a static method:

@NgModule({
    imports: [
        SharedModule,
        levelOneRouter
    ],
    providers: [],
    declarations: []
})
export class LevelOneModule{
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: LevelOneModule,
      providers: [SomeService]
    };
  }
}

After that, call in your LevelTwoModule this static method when importing:

@NgModule({
    imports: [
        LevelOneModule.forRoot(),
        levelTwoRouter
    ],
    providers: [],
    declarations: []
})

This way, the providers instantiated within LevelOneModule gets passed on as a singleton to the child module.

For further info: guide

Answer to question #2

To make declarations (pipes/components/directives/services) available in another module. You should add these declarations to the exports parameter:

@NgModule({
    imports: [
        SharedModule,
        levelOneRouter
    ],
    providers: [],
    declarations: [
        ComponentIJustWantToUseInHere,
        ComponentIWantToUseHereAndElsewhere
    ],
    exports : [
        ComponentIWantToUseHereAndElsewhere,
        ComponentOrPipeOrWhateverIWantToUseElsewhere
    ]
})
export class LevelOneModule{
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: LevelOneModule,
      providers: [SomeService]
    };
  }
}