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?