Angular 18中使用ngx-translate时Translate Pipe导入错误

在Angular 18项目中使用ngx-translate库时，尝试在独立组件中直接导入TranslatePipe，收到如下错误：

The pipe 'TranslatePipe' appears in 'imports', but is not standalone and cannot be imported directly. It must be imported via an NgModule.

目标是正常使用TranslatePipe展示翻译后的文本，当前代码如下：

app.component.ts #

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { RouterOutlet } from '@angular/router';
import { WishItem } from '../shared/models/wishItem';
import { WishListComponent } from './wish-list/wish-list.component';
import { AddWishFormComponent } from './add-wish-form/add-wish-form.component';
import { WishFilterComponent } from "./wish-filter/wish-filter.component";
import { EventService } from "./../shared/services/EventService"
import {TranslateModule, TranslateService, TranslatePipe} from '@ngx-translate/core';


@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, CommonModule, FormsModule, WishListComponent, 
    AddWishFormComponent, WishFilterComponent, TranslatePipe],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  items : WishItem[] = [
    new WishItem("Learn Angular"),
    new WishItem("Get Coffee", true),
    new WishItem("Find grass that cuts itself")
  ];


  constructor(events: EventService, public translate: TranslateService){
    events.listen("removeWish", (wish : any) => {
      let index = this.items.indexOf(wish)
      this.items.splice(index)
    })
    translate.addLangs(['en', 'fr']);
    translate.setDefaultLang('en');

    const browserLang = translate.getBrowserLang();
    if(browserLang != null){
      translate.use(browserLang.match(/en|fr/) ? browserLang : 'en');
    }
  }

  changeLanguage(lang: string) {
    this.translate.use(lang);
  }

  title = "wishlist"

  filter : any;
}

app.component.html #

<div>
  <h2>{{ 'HOME.TITLE' | translate }}</h2>
  <label>
    {{ 'HOME.SELECT' | translate }}
    <select #langSelect (change)="translate.use(langSelect.value)">
      <option *ngFor="let lang of translate.getLangs()" [value]="lang" [selected]="lang === translate.currentLang">{{ lang }}</option>
    </select>
  </label>
</div>

<div class="container">

  <add-wish-form
    (addWish) = "items.push($event)"
  ></add-wish-form>

  <div class="row mt-3">
    <wish-filter
      [(filter)] = "filter"
    ></wish-filter>
  </div>

  <div class="row mt-3">
    <div class = "col-sm-4">
      <wish-list
        [wishes] = "items.filter(filter)"
      >
    </wish-list>
    </div>
  </div>
</div>

<router-outlet />

Angular 17+官方强烈推荐使用独立组件，因此对为何仍需通过NgModule导入TranslatePipe感到困惑。

1. 替换组件导入项：用TranslateModule代替TranslatePipe #

TranslatePipe并非独立管道，它是TranslateModule的一部分，无法直接在独立组件的imports数组中导入。只需将TranslatePipe替换为TranslateModule即可：

修改后的组件imports部分：

imports: [RouterOutlet, CommonModule, FormsModule, WishListComponent, 
  AddWishFormComponent, WishFilterComponent, TranslateModule],

同时移除代码中对TranslatePipe的单独导入：

// 移除这行
import {TranslateModule, TranslateService, TranslatePipe} from '@ngx-translate/core';
// 改为
import {TranslateModule, TranslateService} from '@ngx-translate/core';

2. 确保ngx-translate的全局配置正确 #

如果还未配置翻译文件加载器，需要在main.ts中完成全局配置，确保能正确加载翻译文件（比如assets/i18n/en.json、assets/i18n/fr.json）：

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { provideHttpClient } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

// 定义加载器工厂函数
export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

bootstrapApplication(AppComponent, {
  providers: [
    provideHttpClient(),
    // 配置TranslateModule的根模块
    ...TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    }).providers
  ]
});

说明 #

尽管Angular主推独立组件，但第三方库的适配需要时间。ngx-translate目前仍通过NgModule封装其管道、服务等功能，因此必须通过导入TranslateModule来使用TranslatePipe，而非直接导入管道本身。

内容的提问来源于stack exchange，提问作者Anon