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 :
(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
:
Here is the same breakpoint, but with a functional version of the project (before merging, so), and there is no undefined
parameter :
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'));
});
}
}
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