CODEWITHSUNDEEP
angularngx-translate
Christoph1972
Christoph1972

Reputation: 1096

How to use ngx-translate in module components?

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?

Upvotes: 5

Views: 26332

Answers (2)

Shoib Mohammed A
Shoib Mohammed A

Reputation: 328

I faced the similar issue, issue gets resolved by adding home module to app.module.ts.

If you dont have home module then add home component to the declarations of app module file.

enter image description here

enter image description here

Upvotes: 3

Никита Середа
Никита Середа

Reputation: 2084

just add TranslateModule into imports of component module

or make SharedTranslateModule who import and export TranslateModule and add in to app.module.ts to imports

worked stackblitz

Upvotes: 12

Related Questions