Home:ALL Converter>How to use ngx-translate in module components?

How to use ngx-translate in module components?

Ask Time:2021-05-16T15:02:09         Author:Christoph1972

Json Formatter

I working on ngx-translate. I bring that to work in app.component.html as almost tutorials describe. But how to do this in the components of my modules? Do I have all the steps for every module, or is there an easier way? If I bring all the steps from app.module.ts to my.module.ts I got an error message on running ng serve.

ERROR in src/app/landing-page/home/home.component.html:4:22 - error NG8004: No pipe found with name 'translate'.

This is my home.component.ts:

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

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
  
  constructor(private translateServeice: TranslateService) { }

  ngOnInit(): void {
  }

}

This is my landingpage.module.ts

  import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { HomeComponent } from './home/home.component';
    import { TranslateLoader, TranslateModule, TranslateService } from '@ngx-translate/core';
    import { HttpClient, HttpClientModule } from '@angular/common/http';
    import { TranslateHttpLoader } from '@ngx-translate/http-loader';
    
    export function createTranslateLoader(http: HttpClient) {
      return new TranslateHttpLoader(http, './assets/i18n/', '.json');
    }
    
    @NgModule({
      declarations: [
        HomeComponent
      ],
      imports: [
        CommonModule,
        HttpClientModule,
        TranslateModule.forChild(
          {
            loader: {
              provide: TranslateLoader,
              useFactory: (createTranslateLoader),
              deps: [HttpClient]
            },
          }
        )
        
      ],
      exports: [
        HomeComponent
      ]
    })
    export class LandingPageModule { }

Do I miss any references in my module, or is the way I’m doing this wrong?

What is the usually way to use ngx-translate in module components?

[EDIT]

This is my demo project: https://github.com/Christoph1972/angular-i18n-demo

Please can some one show how to to run it?

Author:Christoph1972,eproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article:https://stackoverflow.com/questions/67553920/how-to-use-ngx-translate-in-module-components
yy