Core: Object(...) is not a function

[AlexanderKozhevin]

I'm submitting a ... (check one with "x")

[x] bug report => check the FAQ and search github for a similar issue or PR before submitting
[ ] support request => check the FAQ and search github for a similar issue before submitting
[ ] feature request

Current behavior
I just follow guideline, but getting an error in application created by angular-cli.

TypeError: Object(...) is not a function
    at TranslateService.get (ngx-translate-core.js:495)

it gives an error only when I use pipe, like

<h2>{{ 'MYCODE' | translate }}</h2>

Expected/desired behavior
I should just translate the stuff.

Here is the source code.
https://gist.github.com/AlexanderKozhevin/08463f36e2ea2046343f118ec7156f74#file-ngx-translate-js-L505-L510

var res = _this.getParsedResult(event.translations, key, interpolateParams);

I logged the value and res already contain translation string, correct one.
But for some reason it is considered as an object, which is wrong.

Here is my module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { HttpClientModule, HttpClient } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';


export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

import { AppComponent } from './app.component';
import { PlayerListComponent } from './player-list/player-list.component';
import { VideosComponent } from './videos/videos.component';
import { routing }       from './app.routing';

@NgModule({
  declarations: [
    AppComponent,
    PlayerListComponent,
    VideosComponent,
  ],
  imports: [
    BrowserModule,
    routing,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (HttpLoaderFactory),
        deps: [HttpClient]
      }
    })

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

And here is my component

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'app';

  constructor(public translate: TranslateService){
    translate.addLangs(["en", "ru"]);
    translate.setDefaultLang('en');
    let browserLang = translate.getBrowserLang();
    translate.use(browserLang.match(/en|ru/) ? browserLang : 'en');
  }
}

[miteshgodhani]

facing same issue.

[ocombe]

What versions of angular and ngx translate are you using?

[sysmat]

facing same issue, after upgrade

 "@angular/common": "5.2.9"
"@ngx-translate/core": "^9.1.1" --> ^10.0.0"

[ocombe]

Version 10 is only compatible with angular 6 and rxjs 6, as explained in the changelog and the readme.

[sysmat]

thx, sory, using ncu

[miteshgodhani]

thanks, it is working with @ngx-translate/core": "9.1.1 as expected with angular 5