How can I create custom pipe for my angular app using ngx-translate and i8n in angular 12

Issue

I'm doing internationalization in my angular project it's like admin portal using @ngx-translate but I'm failing. I want to redo the whole internationalization task any suggestions how to do it

auth.component.html

here I'm getting error -- error NG8004: No pipe found with name 'translate'.

<div class="container">
  <div class="forms-container">
    <div class="signin-signup">
      <form [formGroup]="LoginFrom" (ngSubmit)="Login()" class="sign-in-form">
        <label>Change Language </label>
        <select #selLang (change)="translateLanguageTo(selLang.value)">
          <option *ngFor="let language of translate.getLangs()" [value]="language">{{ language }}</option>
        </select>
        <h2 class="title">{{'login' | translate}} </h2>
        <h4>{{'login_text' | translate}}</h4>
        <div class="input-field">
          <i class="fa fa-user"></i>
          <input (ngModelChange)="start_validaiton_Login_Form('Username')" formControlName="Username" type="text"
            placeholder="Username"/>
            <mat-icon *ngIf="!Login_Username!.invalid && started_Login_Username" class="textbox-icon">check_circle</mat-icon>
            <mat-icon *ngIf="Login_Username!.invalid && started_Login_Username" class="textbox-icon error">error</mat-icon>
        </div>
        <div class="input-field">
          <i class="fa fa-lock"></i>
          <input (ngModelChange)="start_validaiton_Login_Form('Password')" formControlName="Password" type="password"
            placeholder="Password" />
            <mat-icon *ngIf="!Login_Password!.invalid && started_Login_Password" class="textbox-icon">check_circle</mat-icon>
            <mat-icon *ngIf="Login_Password!.invalid && started_Login_Password" class="textbox-icon error">error</mat-icon>
        </div>
        <input [disabled]="!LoginFrom.valid" type="submit" value="Login" class="btn solid" />
      </form>
  </div>

auth.component.ts

import { TranslateService } from '@ngx-translate/core';
import { TranslatePipe } from '@app/pipes/translate.pipe';

@Component({
  selector: 'app-auth',
  templateUrl: './auth.component.html',
  styleUrls: ['./auth.component.scss']
})
export class AuthComponent implements OnInit {

  constructor(private router: Router, private toastr: ToastrService, private _AuthService: AuthService, 
    public translate: TranslateService
    ){
      // Register translation languages
      translate.addLangs(['en', 'er', 'fr']);
      // Set default language
      translate.setDefaultLang('en');

    } 
    //Switch language
    translateLanguageTo(lang: string) {
      this.translate.use(lang);
    }

app.module.ts

import { TranslateService } from '@ngx-translate/core';
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import {TranslatePipe} from '@app/pipes/translate.pipe'
// Factory function required during AOT compilation
export function httpTranslateLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}

@NgModule({
  declarations: [
    AppComponent,
    UserPermissionsComponent,
    TranslatePipe
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: httpTranslateLoaderFactory,
        deps: [HttpClient]
      }
    }),

I also try to create translate pipe by getting help from stakoverflow but error is still same as I'm new to angular I have no idea about custom pipes

Solution

The error you are getting is because angular doesn't recognize the pipe. There could be many reasons why that is the case, firstly you don't need the TranslatePipe in your declarations, also make sure you load the TranslateModule (in your imports) in the correct module, that is, the module where AuthComponent is declared (in declarations field).

Answered By - Patrick Deisinger