ngx-translate .pipe不是一个函数

时间:2018-06-12 09:38:02

标签: angular ngx-translate

使用ngx-translate时出现以下错误:

this.currentLoader.getTranslation(...).pipe is not a function
at TranslateService.getTranslation (core.es5.js:3171)
at TranslateService.retrieveTranslations (core.es5.js:3157)
at TranslateService.setDefaultLang (core.es5.js:3098)
at new AppComponent (app.component.ts:11)
at createClass (core.js:12470)
at createDirectiveInstance (core.js:12315)
at createViewNodes (core.js:13776)
at createRootView (core.js:13665)
at callWithDebugContext (core.js:15090)
at Object.debugCreateRootView [as createRootView] (core.js:14373)

这是我的应用程序组件:

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

@Component({
    selector: 'app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    constructor(private translate: TranslateService) {
        translate.setDefaultLang('en');
        translate.use('en');
    }
}

在这里我导入模块,我在上面使用import以及

声明了它
 imports: [
            TranslateModule.forRoot()
    ]

我还导入了TranslateService:

providers: [
        TranslateService
    ],

如果我删除构造函数中的行,我没有得到错误,但这意味着我也没有翻译。 我在:创建了一个json文件: ClientApp /资产/ I18N / en.json

我在Visual Studio提供的.net核心模板上运行它。我将模板从Angular 4升级到Angular 5.其他插件工作正常,我无法解决错误。

以下是版本: - " @ ngx-translate / core":" 9.1.1", - " @ ngx-translate / http-loader":" 2.0.1" - Angular 5.1.1

2 个答案:

答案 0 :(得分:0)

您需要使用TranslateHttpLoader加载来自" /assets/i18n/en.json"

的翻译
...
import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';
...

// AoT requires an exported function for factories
export function HttpLoaderFactory(http: HttpClient) {
    return new TranslateHttpLoader(http);
}

@NgModule({
    imports: [
       BrowserModule,
       HttpClientModule,
       TranslateModule.forRoot({
          loader: {
            provide: TranslateLoader,
            useFactory: HttpLoaderFactory,
            deps: [HttpClient]
          }
      })
   ],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

答案 1 :(得分:0)

它与@ ngx-translate / core v8.0.0一起使用 对于9.1.1,我有同样的问题

package.json “ @ ngx-translate / core”:“ 8.0.0”