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

Question

我已经按照这个说明安装和使用ngx-translate，并根据我的要求做了轻微的修改。但是我不知道我犯了什么错误。

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

<<p>

我的要求/strong>更改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);
}
}
}

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

注意:我只在我的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');
}