Home:ALL Converter>ngx-translate : Cannot read property 'currentLang' of undefined

ngx-translate : Cannot read property 'currentLang' of undefined

Ask Time:2018-08-28T00:19:25         Author:Noxionx

Json Formatter

I'm working on an Angular 6 project, and I'm facing a pretty annoying problem since I merged a feature branch.

To make it simple :

  • We are using the ngx-translate module from the beginning of the project, and it worked fine until now
  • We are creating features (like the one I merged) on git branches, and we merge them on the develop branch when we finished
  • Both develop and feature branches worked before the merge

Now, after merging, I'm getting the following error on the ngx-translate module when the app bootstraps : ngx-translate error

(Another copy of the stack trace) TypeError: Cannot read property 'currentLang' of undefined at TranslationService.get currentLang [as currentLang] (ngx-translate-core.js:398) at TranslationService.use (ngx-translate-core.js:489) at new AppComponent (app.component.ts:29) at createClass (core.js:11733) at createDirectiveInstance (core.js:11554) at createViewNodes (core.js:13095) at createRootView (core.js:12967) at callWithDebugContext (core.js:14455) at Object.debugCreateRootView [as createRootView] (core.js:13702) at ComponentFactory_.create (core.js:10705)

After a day of searching, I still can't figure out why this error has appeared. What is strange is that none of the code that produces the error has been edited (neither on the develop or feature branch).

I can tell that this error happens after a call of translateService.use('en') (we can see it on the stack trace), and the reason is that the TranslateService isn't instantiated correctly on app bootstrap.

Here is a breakpoint when the constructor of the TranslateService is called, and we can see that most of the parameters are undefined : Breakpoint 1

Here is the same breakpoint, but with a functional version of the project (before merging, so), and there is no undefined parameter : Breakpoint 3

So if anyone has any idea of what's going on, it would be a HUGE help, because I'm out of fresh ideas!

Edit - Here is my the code of my AppComponent

import { Component } from '@angular/core';

import { TranslateService } from '@ngx-translate/core';
import { LangService } from './core/services/lang.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  constructor(
    private translate: TranslateService,
    private languageService: LanguageService,
  ) {
    this.translate.use('fr');
    const subLang = this.languageService.getLangs().subscribe((rep) => {
      this.translate.addLangues(rep);
      this.translate.setDefaultLang(rep.find((l) => l.defaut).code);
      this.translate.use(localStorage.getItem('lang'));
    });
  }
} 

Author:Noxionx,eproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article:https://stackoverflow.com/questions/52043341/ngx-translate-cannot-read-property-currentlang-of-undefined
Noxionx :

Ok so I finally figured out what was happening.\n\nIt was simply the tsconfig.json that has been edited in my feature branch.\n\nSo this here is the part :\n\n{\n \"compileOnSave\": false,\n \"compilerOptions\": {\n \"baseUrl\": \"./\",\n ...\n \"target\": \"es6\" <------- This is the part that is failing\n }\n}\n\n\nWhen I used Angular CLI to create the app, this line was set to \"target\": \"es5\" but I changed it to es6 in my feature branch for whatever reason, and before merging all was working just fine.\n\nIt's after merging that the bug appeared... and I still don't know why ! \n\nSo I just switched back to \"target\": \"es5\" and now it is working.\n\nThanks anyway.",
2018-08-28T15:00:15
yy