CODEWITHSUNDEEP
angularlazy-loading
Larest
Larest

Reputation: 386

How to add third-party services in lazy-load module in Angular? On example of TranslateService(@ngx-translate) and OverlayModule

There is fork of "Minko Gechev" Route-level code splitting in Angular sample app with Translation and Overlay injections.

import { Component, OnInit, Injectable } from '@angular/core';
import { CookieService } from "ngx-cookie-service";
import { ComponentType, Overlay, OverlayConfig } from "@angular/cdk/overlay";

import { TranslateService } from "@ngx-translate/core";

@Injectable({
  providedIn: 'root'
})
export class OverlayService {

  constructor(public overlay: Overlay) {}
}


@Component({
  selector: 'app-nyan',
  template: '<img src="/assets/nyan.png">',
  styleUrls: ['./nyan.component.css']
})
export class NyanComponent implements OnInit {

  constructor(
    private cookieService:CookieService,
    private translateService:TranslateService,
    //private overlayService: OverlayService
  ){
     // No provider for Overlay! trouble 
    //  const overlayRef = this.overlayService.overlay.create();
    //  //touch overlay
    //  console.log(overlayRef);

  }


  ngOnInit(): void {
    // it was same trouble for cookieService but it's gone
     const lang=this.cookieService.get('lang')||'en';
     //touch cookieService
     console.log(lang);

    this.translateService.setDefaultLang('en');
    this.translateService.use(lang);
    // NullInjectorError: No provider for TranslateStore! patch from https://gitmemory.com/issue/ngx-translate/core/883/532257699
    // does not work.
    this.translateService.store.onLangChange.subscribe((lang) => this.translateService.use(lang));

  }

}

The error I got was:

"Error: Uncaught (in promise): NullInjectorError: StaticInjectorError(AppModule)[TranslateService -> TranslateStore]: in lazy module

or

"ERROR Error: Uncaught (in promise): NullInjectorError: StaticInjectorError(AppModule)[InjectionToken cdk-connected-overlay-scroll-strategy -> Overlay]: StaticInjectorError(Platform: core)[InjectionToken cdk-connected-overlay-scroll-strategy -> Overlay]: NullInjectorError: No provider for Overlay!"

for version of "Overlay components uncommented".

Here is a stackblitz.

Upvotes: 1

Views: 1143

Answers (3)

Fahad Hassan
Fahad Hassan

Reputation: 811

It seems like you didn't include TranslateService in your app.module.ts providers array like this

providers : [TranslateService, TranslateStore  ]

Upvotes: 2

Larest
Larest

Reputation: 386

ok, my solution is based on Valentin's solution and the one I provide in Fahad's comment:

it needs: add to AppModule: imports: [HttpClientModule], add to NyanModule: 

...
  providers:[
    CookieService,
    OverlayService,
    TranslateService,
    TranslateStore // fix the translateStore issue
  ]

https://stackblitz.com/edit/github-ajkykc-9astlv?file=src%2Fapp%2Fnyan%2Fnyan.module.ts

there is still a lack: I do not want HttpClientModule in appModule

Upvotes: 0

Valentin Buriakov
Valentin Buriakov

Reputation: 66

To use TranslateService in lazy modules you should first add in your AppModule: imports: [TranslateModule.forRoot(), HttpClientModule]

Using forRoot will inject TraslateService on your app-level as singleton.

And for using Overlay in your OverlayService you should remove providedIn: 'root'; and add OverlayService to your NyanModule providers:

 providers:[
    CookieService,
    OverlayService
  ]

Because for using OverlayModule which is imported in your lazy module, this service should be a part of this module.

Upvotes: 3

Related Questions