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?
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