routerLink from home page results in blank page, while directly hitting the url works fine

Question

I am using the google transliteration api in my angular project. I have a few fields in my registration component which needs to be transliterated. I have a separate service for loading the google transliteration package. In my home page I have a link for registration page through routerLink binding. When I click on this link from home page, a blank page is shown without any errors in console. However, when I hit the same url from the address bar directly, it works.

I debugged this to some extent and found that the problem lies in the constructor of the transliterator service.ts file. If I remove that, the routing works fine from the home page. But I am not sure how to fix this issue without removing the service dependency.

Registration Component:

export class RegistrationComponent implements OnInit, AfterViewInit {

  transLitElementArray: ElementRef[] =[];

   @ViewChild('userDescription') userDescription:ElementRef;
   @ViewChild('displayName') displayName:ElementRef;

  constructor(private transliteratorService:Transliterate) { }

  ngOnInit() {
    
  }

  ngAfterViewInit(){

     this.transLitElementArray.push(this.userDescription);
     this.transLitElementArray.push(this.displayName);

     this.transliteratorService.initializeTransliteration(this.transLitElementArray);

  }

}

Transliteration service:

export class Transliterate {

  textAreaArray: ElementRef[];

  constructor() {
    google.load("elements", "1", {
      packages: "transliteration"
    });

  }

  initializeTransliteration(elementFromComponent: ElementRef[]) {


    this.textAreaArray = elementFromComponent;
    google.setOnLoadCallback(() => this.onLoad());
  }


  private onLoad() {
    const elements = [];
    this.textAreaArray.forEach((element: ElementRef) => {
      elements.push(element.nativeElement);
    });


    var options = {
      sourceLanguage: 'en',
      destinationLanguage: ['ta'],
      shortcutKey: 'ctrl+g',
      transliterationEnabled: true
    };

    var opt_options = {
      adjustElementStyle: false,
      adjustElementDirection: true
    }

    // Create an instance on Transliteration Control with the required
    // options.
    var control = new google.elements.transliteration.TransliterationControl(options);

    control.makeTransliteratable(elements, opt_options);

  }
}

I can feel that it is something to do with the async'ness of the activity that I am doing inside the constructor of the service. But, I am a beginner and I am not able to resolve this.

Answer 1

I resolved this issue. If someone is looking for the answer, please refer to the answer from this stack overflow question. Thanks to the guy who posted the answer.