Angular use service in lazy loaded module

Question

I have a service called routing.service which subscribes to routing event and when a parameter changes, it updates Translate service. As following in constructor:

this.router.events.subscribe(val => {
    if (val instanceof ActivationEnd ) {
        let myVal = val.snapshot.params.lang;
        this.currentLang = myVal;
        this.translate.use(myVal);
        this.translate.setDefaultLang(config.defaultLang);
    }
});

I have a shared module that is imported into the app module. In shared component everything works fine:

<div [innerHTML]="'HOME.TITLE' | translate"></div>

But in my lazy loaded modules not working. Even I can't access to this.currentLang that is inside subscribe. Any idea?

Update: Here is more detail about my code:

app.module:

imports:[
  CommonModule,
  BrowserModule,
  FormsModule,
  NgtUniversalModule,
  TransferHttpCacheModule,
  HttpClientModule,
  AppRoutingModule,
  SharedModule
],

shared.module:

imports: [
  CommonModule,
  RouterModule,
  TranslateModule.forRoot({
    loader: {
      provide: TranslateLoader,
      useClass: TranslateUniversalLoader,
    }
  })
],
exports: [
  HeaderComponent,
  TranslateModule
]

lazy-loaded.module:

imports: [
  CommonModule,
  FormsModule,
  CustomersRoutingModule,
  SharedModule,
],

My app.component:

<!-- This is component of my shared.module and translation works fine here, but not in lazy loaded modules -->
<saz-header></saz-header> 
<router-outlet></router-outlet>

I have a feeling you may have to import SharedModule into your other modules if you want to use your router.service. The lazy loaded modules wont be able to access it unless they import your SharedModule. Personally, I'd recommend moving your routing.service possibly into your AppModule. It makes more sense to have it there, or to a CoreModule — jarodsmk
– jarodsmk, Commented Mar 28, 2019 at 7:23
@N15M0_jk I have already imported SharedModule into my other lazy module. And what do you mean by move your routing.service possibly into your AppModule — Vahid Najafi
– Vahid Najafi, Commented Mar 28, 2019 at 7:31
Hmmm, that's unusual then. When I mentioned move your routing.service possibly into your AppModule, I assumed your routing.service isn't a provider in your AppModule. Would you kindly share your AppModule, SharedModule and lazy loaded module files so we can see how everything is imported/etc? — jarodsmk
– jarodsmk, Commented Mar 28, 2019 at 7:44
Ops, I have forgotten to inject the service in my SharedModule component. Now it works fine. Thanks. — Vahid Najafi
– Vahid Najafi, Commented Mar 28, 2019 at 8:16

jarodsmk · Accepted Answer · 2019-03-28 08:38:05Z

1

Glad you got it working, but for sake of completion:

1) Double check in which module your service is provided. Generally, a routing service should always be accessible, and it makes sense to load with your AppModule, or depending on if you follow John Papa's suggested project structure, a CoreModule.

In your case, it might be logical to have the service imported in the AppRoutingModule.

2) If you do have a service that you'd like lazy loaded, it might be beneficial to include said service in an isolated, simple module that you can lazy load whenever you need it to (simply put, a small Module that just includes the few things you may or may not need)

answered Mar 28, 2019 at 8:38

jarodsmk

2,1192 gold badges25 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Vahid Najafi Over a year ago

Thanks for your answer. But when I provide the service in AppModule, still in lazy-loaded module I can't access to service. I must provide it in SharedModule.

Vahid Najafi Over a year ago

See this demo: stackblitz.com/edit/…

jarodsmk Over a year ago

Cool, will check it out soon!

jarodsmk Over a year ago

Here you go, sorry about that: stackblitz.com/edit/angular-no-for-root-fz46kh

Vahid Najafi Over a year ago

Thank you so much. And one more question. Should I import my external module (in this case TranslateModule) in AppModule or SharedModule? (I use TranslateService in my own routing.service)

|

Vahid Najafi · Accepted Answer · 2019-03-28 08:37:16Z

0

I had just forgotten to add the provider to my SharedModule as following:

providers: [
  RoutingService
]

answered Mar 28, 2019 at 8:37

Vahid Najafi

5,38311 gold badges53 silver badges98 bronze badges

Collectives™ on Stack Overflow

Angular use service in lazy loaded module

2 Answers 2

11 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

11 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related