Angular 13 i18n - ngx-translate - 找不到名称为 'translate' 的管道 - 如何修复？

Question

我已经按照 this instruction 安装和使用 ngx-translate 并根据我的要求做了一些小的修改。但是我找不到我犯了什么错误。

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

我的要求

更改 nav-bar-component 的语言并在 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);
    }
  }

}

导航-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>

语言-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);
  }
}

注意： 我仅在 my StackBlitz 中遇到以上错误，但在本地计算机中遇到另一个问题，如 GET http://localhost:4200/assets/i18n/en.json 404 (Not Found)

我该如何解决这个问题？

Answer 1

TranslateModule.forRoot({
      defaultLanguage: 'en',
      loader: {
        provide: TranslateLoader,
        useFactory: (createTranslateLoader),
        deps: [HttpClient]
      }
    })
    
    
    
    
    export function createTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, '**/assets/i18n/**','.json');
}

Answer 2

找到Solution from here

这对以后的人有帮助。

Angular 13 i18n - ngx-translate - 找不到名称为 'translate' 的管道 - 如何修复？

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

internationalization

ngx-translate

angular