Angular2: Lazy loading components and injectables as singletons

Question

Is there someway for providing @Injectables as singletons loading components using loadChildren (lazy loading components)?

If not, is there some way to get it?

I'm asking it for this post. According to that, it's not possible to inject an @Injectable as singletons on submodules.

I'm trying to inject an @Injectable AppState as a singleton:

@Injectable()
export class AppState {
  public user: string;

  constructor() {

  }
...

I've set it on AppModule as provider:

// Application wide providers
const APP_PROVIDERS = [
  AppState
];

@NgModule({
  bootstrap: [ App ],
  declarations: [
    App,
    ErrorComponent
  ],
  imports: [ // import Angular's modules
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule.forRoot(ROUTES, { useHash: true })
  ],
  providers: [
    APP_PROVIDERS
  ]
})
export class AppModule {
  constructor(public appRef: ApplicationRef, public appState: AppState) {}
}

So, I've also created a "submodule":

@NgModule({
  //...
  providers: [ AppState ]
})
export default class LoginModule {

On LoginComponent I do:

export class Login implements OnInit {

    constructor(private appState: AppState) {}

    public doLogin():void {
        this.appState.user = this.form.value.mail;
    }
}

Nevertheless, on another component named Profile, it seems that this.appState.user is undefined.

@NgModule({
  //...
  providers: [ AppState ]
})
export default class ProfileModule { /... }

@Component({
  //...
})
export class Profile implements OnInit {

  constructor(private appState: AppState) {

  }

  ngOnInit():void {
    this.user = this.appState.user;  <<<<<<<<<<<<< it's undefined
  }
}

Why this.appState.user is undifined if I'set it before in another component?

Don't provide it at the level of your lazy load _modules_. You'll have to provide it at the `app.module`level (or if you use one in your `core.module`). — benny_boe, Dec 28 '16 at 07:21
What about [this post](http://stackoverflow.com/a/40981772/217408)? — Jordi, Dec 28 '16 at 07:26

score 2 · Accepted Answer · answered Dec 28 '16 at 07:36

2

That post explains everything you need to know. Any service declared in the lazy loaded module will only be a singleton for that module. Any service loaded in the root module will be a singleton throughout the app, including inside lazy loaded modules

answered Dec 28 '16 at 07:36

Poul Kruijt

69,713
12
145
149

I've edited the post. According to that. If I inject `AppState` on `AppModule (constructor(private appState: AppState))` it should be the same object (singleton) on `LoginComponent` and `ProfileComponent`, shouldn't it? Nevertheless, `this.appState.user` is always `undefined` regardless of whether on `LoginComponent` have assigned it... – Jordi Dec 28 '16 at 07:45
@Jordi Why you're declaring `AppState` in providers array of `ProfileModule` and `LoginModule`? Have you tried to declare it only in `AppModule`? – yurzui Dec 28 '16 at 07:51

score 1 · Answer 2 · edited Dec 28 '16 at 07:23

1

All @Injectable() services are singletons. Loading components is the job of the router, not the service.

edited Dec 28 '16 at 07:23

eko

39,722
10
72
98

answered Dec 28 '16 at 07:22

siva636

16,109
23
97
135

Angular2: Lazy loading components and injectables as singletons

2 Answers2