Translate at angular 6

Question

I’m using the i18n at the angle as the image below:

In app.component.ts is like this:

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

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  public translate : any;
  constructor(translate: TranslateService) {
    translate.addLangs(["pt", "en"]);
    translate.setDefaultLang("pt");
    const browserLang = translate.getBrowserLang();
    translate.use(browserLang.match(/pt|en/) ? browserLang : "pt");
  }
}

To call what is described in in8, I do so in html: <span>{{ 'SISTEMA' | translate }} {{ 'NOME_DO_SISTEMA' | translate }}</span>

In the English json it is like this:

{
  "NOME_DO_SISTEMA": "from medical clinic",
}

In the Portuguese json it looks like this:

{
  "NOME_DO_SISTEMA": "de clinica médica",
}

Accurate if user changes language, changes file according to language set.

I did so:

          <option *ngFor="let lang of translate.getLangs()" [value]="lang" [selected]="lang === translate.currentLang">

            {{ lang }}</option>

        </select>

But has error according to image.

I’m using @ngx-Translate/http-Loader.

What can it be ?

Answer 1

If Translate isn’t added to the modules, there’s no way the service starts or recognizes it, then in the app.modules add:

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

...

@NgModule({
    imports: [
        BrowserModule,
        TranslateModule.forRoot()
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

One should use the TranslateModule.forRoot(), it is like a "boot", but of course this is the use case for "all", to use, you can also use to SharedModule that will not be shared with everything, but will be shared wherever "called", as components or "Pipes", to add to SharedModule create a module with any name and add this (it’s just an example):

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

@NgModule({
    exports: [
        CommonModule,
        TranslateModule
    ]
})
export class SharedModule { }

Or you can use Lazyloadmodule as described in the repository: https://github.com/ngx-translate/core#Lazy-Loaded-modules