Angular 13 i18n - ngx-translate - No pipe found with name 'translate' - How to fix?

Issue

I've followed this instruction to install and use ngx-translate and did minor modification as per my requirement. But I'm not able to find what mistake I've done.

Error in src/app/feature/test-1/abc/abc.component.html (1:25)
No pipe found with name 'translate'.

my requirement

Change the language from nav-bar-component and apply the changes in rest of feature modules component

**app.module.ts**
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { NavBarComponent } from './nav-bar/nav-bar.component';
import { AppRoutingModule } from './app-router.module';

import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { HttpClient } from '@angular/common/http';
import { LanguageService } from './services/language.service';
@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: httpTranslateLoader,
        deps: [HttpClient],
      },
    }),
  ],
  declarations: [AppComponent, HelloComponent, NavBarComponent],
  providers: [LanguageService],
  bootstrap: [AppComponent],
})
export class AppModule {}
export function httpTranslateLoader(http: HttpClient): any {
  return new TranslateHttpLoader(http, '../assets/i18n/', '.json');
}

nav.bar.component.ts

export class NavBarComponent implements OnInit {
  locale = [
    { id: 'en', name: 'English' },
    { id: 'de', name: 'German' },
    { id: 'es', name: 'Spanish' },
  ];
  constructor(public translate: TranslateService, public languageService: LanguageService) {
    this.translate.addLangs(['en', 'es', 'de']);
    this.translate.use('en');
    this.translate.setDefaultLang('en');
    this.languageService.currentLanguage.subscribe(lang => {
      this.translate.use(lang);
    })
   }

  ngOnInit() {
  }
  changeLanguage(lang: any):void {
    const selectedLanguage = lang?.srcElement?._value[0];
    if(selectedLanguage){
      this.languageService.changeSelectedLangage(selectedLanguage);
      this.translate.use(selectedLanguage);
    }
  }

}

nav-bar.html

<div class="nav-bar">
  <select (change)="changeLanguage($event)">
    <option *ngFor="let lang of locale" [value]="lang.id">
      {{ lang.name }}
    </option>
  </select>

  <button
    [routerLinkActive]="['link-active']"
    [routerLink]="['/test-one-module']"
  >
    Test Module 1
  </button>

  <button
    [routerLinkActive]="['link-active']"
    [routerLink]="['/test-two-module']"
  >
    Test Module 2
  </button>
</div>

language-service.ts

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable()
export class LanguageService {
  private browserLanguage = navigator.language.substring(0, 2);
  private selectedLanguage = new BehaviorSubject(this.browserLanguage);
  public currentLanguage = this.selectedLanguage.asObservable();
  constructor() {}

  changeSelectedLangage(lang: string) {
    this.selectedLanguage.next(lang);
  }
}

Note: I'm getting above error in my my StackBlitz only, but I'm getting another issue in local machine like GET http://localhost:4200/assets/i18n/en.json 404 (Not Found)

How can I fix the issue?

Solution

found Solution from here

it will help someone in future.

Answered By - Flavio