ERROR TypeError Cannot read property 'getLangs' of undefined

Question

Hi,

can anyone help me to fix this error

 

this is my script

 

and thanks in advance 

 

 

 

main.component.html

<!-- MAIN CONTENT -->
<div id="main-content">
        <div class="jumbotron">
            <!--span class="sp"> Notre philosophie.Notre travail consiste à aider chaque entreprise à comprendre son marché, marquer son territoire face à la concurrence, séduire le public par l'attraction de la marque ou motiver le stagiaire sur le projet d'entreprise. </span>
            <br /-->
            <p>{{ 'header.title' | translate }} {{title}}</p>
        </div>
    </div>



<!-- END MAIN CONTENT -->

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

 

 

<!-- NAVBAR -->
<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>
        <!-- logo -->
        <div class="navbar-brand">
            <a [routerLink]='["/home"]'>Quantum Technologies</a>
        </div>
        <!-- end logo -->
        <div class="navbar-right">

                <!--button type="button" class="btn btn-primary">Translate</button-->
                <div class="btn-group">
                    <!--a type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                      Choose your language <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu" role="menu" style="margin-right: 13px;">
                        <li><a class="btn btn-default">English</a></li>
                        <li><a class="btn btn-default">French</a></li>
                    </ul-->
                    <label><span style="color:white">{{ 'header.select' | translate }}</span>
                        <select #langSelect (change)="translate.use(langSelect.value)">
                             <option *ngFor="let lang of translate.getLangs()" [value]="lang" [selected]="lang === translate.currentLang">{{ lang }}
                             </option>
                        </select>
                   </label>
                  </div>

        </div>
    </div>
</nav>


<!-- END NAVBAR -->

 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');
   }

}