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 >
  <div >
    <div >
      <form [formGroup]="LoginFrom" (ngSubmit)="Login()" >
        <label>Change Language </label>
        <select #selLang (change)="translateLanguageTo(selLang.value)">
          <option *ngFor="let language of translate.getLangs()" [value]="language">{{ language }}</option>
        </select>
        <h2 >{{'login' | translate}} </h2>
        <h4>{{'login_text' | translate}}</h4>
        <div >
          <i ></i>
          <input (ngModelChange)="start_validaiton_Login_Form('Username')" formControlName="Username" type="text"
            placeholder="Username"/>
            <mat-icon *ngIf="!Login_Username!.invalid && started_Login_Username" >check_circle</mat-icon>
            <mat-icon *ngIf="Login_Username!.invalid && started_Login_Username" >error</mat-icon>
        </div>
        <div >
          <i ></i>
          <input (ngModelChange)="start_validaiton_Login_Form('Password')" formControlName="Password" type="password"
            placeholder="Password" />
            <mat-icon *ngIf="!Login_Password!.invalid && started_Login_Password" >check_circle</mat-icon>
            <mat-icon *ngIf="Login_Password!.invalid && started_Login_Password" >error</mat-icon>
        </div>
        <input [disabled]="!LoginFrom.valid" type="submit" value="Login"  />
      </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

CodePudding user response：

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).

CodePudding user response：

In ngx-translate you dont have to create a custom pipe.
You should rename the translate service in your component.ts since it is the same name as translate pipe and it is public, the html is getting confused between the translate pipe and the public translate service.