I'm getting an error while translating a site using the ngx translate. Error: NG0100: Expressio-CodePudding

I'm getting an error while translating a site using the ngx translate package. core.mjs:7643 ERROR Error: NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'May add up less than 3 characters'. Current value: 'Use at least 3 symbols'. When simply translating the page, I get an error that the expression has been changed after validation. How can I fix this behaviour?

My component:

<app-welcome-form>
  <form (submit)="userRegister($event)"  [formGroup]="form">
    <mat-form-field
      hintLabel="{{ 'SIGNUP.USERNAME_HINT' | translate: { value: 3 } }}"
      appearance="fill"
    >
      <mat-label>{{ "SIGNUP.USERNAME" | translate }}</mat-label>
      <input
        matInput
        #input
        placeholder="{{ 'SIGNUP.USERNAME' | translate }}"
        name="username"
        formControlName="username"
      />
    </mat-form-field>
    <app-password-field
      titleOfField="{{ 'SIGNUP.PASSWORD' | translate }}"
      [hintLabel]="'SIGNUP.PASSWORD_HINT' | translate: { value: 6 }"
      [name]="'password'"
      [formCtrl]="$any(form.controls['password'])"
    ></app-password-field>
    <app-password-field
      titleOfField="{{ 'SIGNUP.CONFIRMATION' | translate }}"
      [hintLabel]="'SIGNUP.PASSWORD_HINT' | translate: { value: 6 }"
      [name]="'password'"
      [formCtrl]="$any(form.controls['passwordConfirmation'])"
    ></app-password-field>
    <button  mat-raised-button color="primary" type="submit">
      {{ "SIGNUP.SIGNUP" | translate }}
    </button>
  </form>

  <p >{{ "SIGNUP.MEMBER" | translate }}</p>
  <a [routerLink]="'/'   loginPath">{{ "SIGNUP.SIGNIN" | translate }}</a>
  <app-language-switcher></app-language-switcher>
</app-welcome-form>

And function that translate it (simple function for a visual example):

ngOnInit(): void {
    this.translateService.use('en');
  }

  changeLanguage() {
    if (this.language === 'en') {
      this.translateService.use('en');
    }
    this.translateService.use('ua');
    }

Any ideas would be helpful.

CodePudding user response：

Inject an instance of ChangeDetectorRef into your component constructor like this

constructor(private cdref: ChangeDetectorRef) {}

Then in ngOnInit lifecycle hook call detectChanges() like the following

ngOnInit(): void {
  this.translateService.use('en');
  this.cdref.detectChanges();
}

The above method will get rid of the error, but it's not good. Please note that you shouldn't be creating multiple instances of TranslateService, and it's highly preferred you make a singleton object of it and call the methods you want only once (In the constructor of your app.component.ts for example).

CodePudding user response：

It's works for me when I set inside TranslateModule configuration object with property defaultLanguage.