ngx-translate：无法读取未定义的属性“currentLang”答案

【问题标题】：ngx-translate : Cannot read property 'currentLang' of undefinedngx-translate：无法读取未定义的属性“currentLang”
【发布时间】：2018-08-27 16:19:25
【问题描述】：

我正在开发一个 Angular 6 项目，但由于我合并了一个功能分支，我遇到了一个非常烦人的问题。

为了简单：

我们从项目一开始就使用ngx-translate 模块，直到现在它都运行良好
我们正在 git 分支上创建功能（就像我合并的那个），并在完成后将它们合并到开发分支上
develop 和 feature 分支在合并之前都可以工作

现在，合并后，当应用程序启动时，ngx-translate 模块出现以下错误：

（堆栈跟踪的另一个副本） 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)

经过一天的搜索，我仍然无法弄清楚为什么会出现这个错误。奇怪的是，产生错误的代码都没有被编辑过（无论是在开发分支上还是在功能分支上）。

我可以看出这个错误是在调用translateService.use('en') 之后发生的（我们可以在堆栈跟踪中看到它），原因是TranslateService 没有在应用程序引导程序上正确实例化。

这里是调用TranslateService的构造函数时的断点，可以看到大部分参数都是undefined:

这里是同一个断点，但是带有项目的功能版本（在合并之前，所以），并且没有undefined参数：

因此，如果有人知道发生了什么，那将是一个巨大的帮助，因为我没有新鲜的想法！

编辑 - 这是我的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'));
    });
  }
}

【问题讨论】：

如果之前在开发分支中工作正常，您可以在合并之前检查“差异”与之前的提交，如果它之前在开发分支中工作正常。很可能您的分支之间存在版本不匹配跨度>
你能告诉我们AppComponent的代码吗？
@Niladri 我现在会检查模块版本，我会与您保持联系。 @user184994 我编辑了我的帖子以添加AppComponent 的代码，但我认为它不会有更多帮助，因为这段代码已经很长时间没有修改了。
@Niladri 所以我做了一些检查，但它似乎不是版本不匹配（或者可能是yarn.lock 的奇怪行为）。我做了以下测试，对我来说是相关的：我在旧的功能版本上git checkout（并测试它，所以它工作！），然后我在最后一个版本上git checkout（所以node_module不是' t 完全改变）然后应用程序中断。

标签： angular git angular6 ngx-translate

【解决方案1】：

好的，所以我终于弄清楚发生了什么。

这只是在我的功能分支中编辑的tsconfig.json。

所以这是部分：

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    ...
    "target": "es6" <------- This is the part that is failing
  }
}

当我使用 Angular CLI 创建应用程序时，此行设置为 "target": "es5"，但出于某种原因，我在功能分支中将其更改为 es6，在合并之前一切正常。

是合并后出现的bug……我还是不知道为什么！

所以我刚刚切换回"target": "es5"，现在它正在工作。

还是谢谢。

【讨论】：

【解决方案2】：

在 app.component.ts 的构造函数文件中

  constructor(public translation: TranslateService) {
    translattion.addLangs(['en', 'ur', 'sd']);
    translattion.setDefaultLang('en');
  }

确保在 app.component.ts 上导入库

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

现在在您项目的任何 ts 文件中，只需调用上述库并在构造函数中对其进行初始化

otherServices.service.ts 文件

constructor(private http: HttpClient, private translation: TranslateService) { 

    this.translation.use(this.translation.getBrowserLang());
    console.log(this.translattion.currentLang)
    //outpu is en . en is the default language
  }

【讨论】：