ERROR TypeError Cannot read property 'getLangs' of undefined

Hi,

can anyone help me to fix this error

this is my script

and thanks in advance

main.component.html

<div id="main-content">
<div class="jumbotron">

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {routes} from './app.routing'
import { FormsModule } from '@angular/forms';
import { LocationStrategy, HashLocationStrategy } from '@angular/common';
import { AppComponent } from './app.component';
import { NavbarComponent } from './navbar/navbar.component';
import { SidebarComponent } from './sidebar/sidebar.component';
import { FooterComponent } from './footer/footer.component';
import { HomeComponent } from './main/main.component';
import { LoginComponent } from './login/login.component';
import { RegisterComponent } from './register/register.component';
import {Globals} from './globals'
import { AboutComponent } from './about/about.component';
import { ContactComponent } from './contact/contact.component';
import {TranslateModule, TranslateLoader} from "@ngx-translate/core";
import {TranslateHttpLoader} from "@ngx-translate/http-loader";
import {HttpClientModule , HttpClient} from "@angular/common/http";
export function HttpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(http, "i18n/", ".json");
}
@NgModule({
declarations: [
AppComponent,
NavbarComponent,
SidebarComponent,
HomeComponent,
FooterComponent,
LoginComponent,
RegisterComponent,AboutComponent,ContactComponent
],
imports: [
BrowserModule,routes,FormsModule,
HttpClientModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
}
})
],
providers: [Globals, {
provide: LocationStrategy, useClass: HashLocationStrategy
}],
bootstrap: [AppComponent]
})
export class AppModule { }

navbar.component.html

<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-btn">
<button type="button" class="btn-toggle-offcanvas"><i class="lnr lnr-menu">i>button>
div>
<div class="navbar-brand">
<a [routerLink]='["/home"]'>Quantum Technologiesa>
div>
<div class="navbar-right">
<div class="btn-group">

app.component.ts

import { Component } from '@angular/core';
import {Globals} from './globals';
import { TranslateService } from '@ngx-translate/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
constructor(private translate: TranslateService) {
translate.addLangs(["en", "hi"]);
translate.setDefaultLang('en');
let browserLang = translate.getBrowserLang();
translate.use(browserLang.match(/en|fr/) ? browserLang : 'en');
}
}

5 Replies

Know the answer? Post it — somebody with the same question will find it here.

Dev Teywa8y ago
Rahul Saraswat

i have problem i add english and french but when i see the display i see hindi

here is the code navbar.component.ts

constructor(private translate: TranslateService) {
translate.addLangs(["en","fr"]);
translate.setDefaultLang("en");
let browserLang = translate.getBrowserLang();
translate.use(browserLang.match(/en|fr/) ? browserLang : "en");
0
Rahul8y ago
Got your point. Check it out -
http://angular4plus.blogspot.in/2017/06/angular-24-content-translation-using.html
0
Dev Teywa8y ago
Rahul Saraswat
navbar.component.ts

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



@Component({

  selector: 'app-navbar',

  templateUrl: './navbar.component.html',

  styleUrls: ['./navbar.component.css']

})

export class NavbarComponent implements OnInit {



  constructor() { }



  ngOnInit() {

  }



}
0
Dev Teywa8y ago
Rahul there is nothing in navbar component all the treatment I did in app.component
0
Rahul8y ago
Where is "navbar.component.ts" file. I see, you have used "getLangs()" method in below code which should be in component file. Share navbar component file also to get more details about exception.

Thanks
0