"Angular翻译管道未找到"

Question

我有一个组件使用了translateService，但是在组件模板HTML中使用管道无法翻译项目，会出现以下错误：

找不到管道“translate”

app.module.ts

import {BrowserModule} from "@angular/platform-browser";
import {NgModule} from "@angular/core";
import {HttpModule, Http} from "@angular/http";
import {TranslateModule, TranslateLoader, TranslateStaticLoader} from 'ng2-translate';
import {AppComponent} from "./app.component";

@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
HttpModule,
TranslateModule.forRoot({
    provide: TranslateLoader,
    useFactory: (http: Http) => new TranslateStaticLoader(http, './assets/i18n', '.json'),
    deps: [Http]
   })
],
bootstrap: [AppComponent]
})
export class AppModule {
}

预订.component.ts

import {Component, OnInit} from '@angular/core';
import {BookingComponent} from './booking.component';
import {TranslateService} from 'ng2-translate';

@Component({
   selector: 'app-booking',
   templateUrl: './booking.component.html',
   styleUrls: ['./booking.component.css']
})

export class BookingComponent implements OnInit {
  constructor(private translate: TranslateService
  ) {
    translate.setDefaultLang('de');
    translate.use('de');
};

ngOnInit() {
}
}

booking.component.html

<p>{{'TESTKEY' | translate }}</p>

使用组件服务的翻译很好，但我还需要使用管道来翻译HTML。

- Fabio

Answer 1

你需要在声明BookingComponent的任何模块中引入imports: [ TranslateModule ]。在应用程序模块中的导入仅使管道可用于在该模块中声明的组件。但是提供程序/服务是从模块全局注册的(与组件、指令和管道不同)

- Paul Samsotha

---

你可以导入一个包含TranslateModule的模块。我使用了imports: [ SharedModule, //<- 这个模块包含了Imports:[TranslateModule] XYZModule ]。 - undefined

Answer 2

以下是修复问题的步骤：

1. 在app.module.ts中添加翻译模块逻辑、翻译加载器和翻译工厂。

    TranslateModule.forRoot({
        provide: TranslateLoader,
        useFactory: (http: Http) => 
        new TranslateStaticLoader(http, './assets/i18n', '.json'),
        deps: [Http]
       })
    ],`

1. 在你的 shared.module.ts（或任何其他模块）中，导入并导出 Translate 模块。
   例如：Translate 模块应该是导入和导出数组的一部分。大多数在 SO 和 Github 上的答案都提到了导入模块，但没有提到导出模块。

    @NgModule({
     imports: [
       // other imported modules here
       TranslateModule
    ],
    exports: [
    // other exported modules here
    TranslateModule]`

- Jonathan Cardoz

---

文档仅建议在使用 SharedModule 时导出 TranslateModule。没有提到必须将其添加到根模块（即 AppModule）的导出中。然而，将其添加到导出中使 translate 管道正常工作。参考 ngx-translate 文档链接如下：https://github.com/ngx-translate/core#1-import-the-translatemodule - Glenster

导出该模块允许在共享模块之外使用管道；反之，在共享模块中导入该模块允许在共享模块中使用它及其管道。 - netalex

不需要导出TranslateModule。它仅用于从该模块共享组件。只有导入才有效。在Angular11项目＃2021中测试过。 - minigeek

谢谢，它起作用了！我的“translate”管道在子模块中没有工作，同时添加导出修复了这个问题，原因不明。 - Ap0st0l

Answer 3

我只遇到了单个"页面"上的这个问题。如果缺少包含翻译管道的组件的声明，则它也无法找到它。

const routes: Routes = [
  {
    path: '',
    component: InventoryPage
  }
];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    TranslateModule.forChild(),
    RouterModule.forChild(routes),
    SharedComponentModule
  ],
  declarations: [
    InventoryPage // << Check your declaration
  ]
})
export class InventoryPageModule {}

- Flos

Answer 4

我正在使用Ionic 5。我的home.page.html中的HTML代码如下：

<h2 > {{'HOME.title' | translate }}</h2>

我遇到了错误。

管道 'translate' 找不到

在 Visual Studio Code 中标记为红色错误。但 Ionic 应用程序仍然可以通过 ionic serve 编译，翻译也正常工作。

无论如何，我成功地解决了这个错误。如上所述，有些指南没有强调还重要导出模块。在我的情况下，在 home.module.ts 中进行导出。

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';
import { HomePage } from './home.page';

import { HomePageRoutingModule } from './home-routing.module';
import {TranslateModule} from '@ngx-translate/core'; //IMPORT THE MODULE IN ANY PAGE 

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    HomePageRoutingModule,
    TranslateModule     //IMPORT THE MODULE
  ],
  declarations: [HomePage],
  exports:[TranslateModule],     //REMEMBER TO ADD THIS TO EXPORT IT AS WELL!!!
})
export class HomePageModule {}

- Pietro

Answer 5

对于我来说，简单地重新启动Visual Studio Code解决了这个问题。

- Jordec

---

我想知道当你使用ng build编译应用程序时，你的解决方案是否有效？ - undefined

Answer 6

翻译模块：将翻译器用作管道（在模板上）

import { TranslateModule } from '@ngx-translate/core';

imports: [
CommonModule,
RouterModule, //Router Module
TranslateModule //Translate Module**

]

- rohit.khurmi095

Answer 7

我花了几个小时在一个新项目中尝试修复这个问题，我正在使用不同的多个模块（app.module.ts，client.module.ts，admin.module.ts）

我尝试在所有地方导入translateModule，但它从未起作用，直到我发现我没有在app.module.ts中导入clientModule和adminModule。

请注意：

  imports: [
BrowserModule,
AppRoutingModule,
RouterModule,
ClientModule, // make sure this is imported
ClientRoutingModule,
AdminModule,  // make sure this is imported
AdminRoutingModule,
SharedModule
],
 exports: [
SharedModule  // where i imported my TranslateModule
 ]

- Zinou A

Answer 8

我遇到了同样的错误，请在您的相应模块中添加TranslateModule。另外，请确保您已经添加了以下内容。

app.module.ts 类之外：

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}

内部导入：

TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
}}),

子模块 - 导入：

TranslateModule

输出

- Abdullah

Answer 9

还有一个可能的问题。如果你使用更新版本的angular和ngx-translate，并且在设置中勾选了“使用旧视图引擎”，那么vs code会用红色下划线标出翻译管道，显示找不到它，但是当应用程序运行时，翻译将会生效。因此，只需取消勾选此选项，一切都会变得正常。

- Aleksa

Answer 10

如果你在 Angular 的懒加载模块中使用翻译模块，你需要在懒加载文件的 module.ts 文件中添加 TranslateModule 导入。然后它就会工作。

- Manoj V