角度翻译找不到管道

Question

我有一个使用translateService的组件，但无法使用组件模板HTML上的管道翻译项目，我收到以下错误：

找不到管道“翻译”

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 {
}

预订.组件.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() {
}
}

预订.component.html

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

组件上的服务翻译工作正常，但我还需要用管道翻译 html

Answer 1

您需要

imports: [ TranslateModule ]

进入声明

BookingComponent

的任何模块。 app 模块中的导入仅使管道可用于该模块中声明的组件。但提供者/服务是从模块全局注册的（与组件、指令和管道不同）

Answer 2

对于遇到此问题的人，简而言之，以下是解决问题所需执行的步骤

1. 将翻译模块逻辑以及翻译加载器和translateFactory 存在于app.module.ts 中

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

1. 在您的shared.module.ts（或任何其他模块）中，导入和导出翻译模块。
   即：翻译模块应该是导入和导出数组的一部分。 SO 和 github 中的大多数答案都提到导入模块但没有导出它。

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

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 {}

Answer 4

我正在使用 Ionic 5。我的 HTML 位于 home.page.html

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

我有错误

找不到管道“翻译”

在 Visual Studio Code 中以红色错误标记。但无论如何，Ionic 应用程序都是使用 ionicserve 进行编译的，并且翻译工作正常。

无论如何，我设法消除了错误。正如上面已经提到的，一些指南并没有强调导出模块也很重要。就我而言，在 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 {}

Answer 5

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

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

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

]

Answer 6

简单地重新启动 Visual Studio Code 就解决了我的问题。

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
 ]

Answer 8

还有一个可能的问题。如果您使用较新版本的

angular

和

ngx-translate

，并且在设置中选中了“使用旧版视图引擎”，则

vs code

会在翻译管道上加下划线，并用红色表示它找不到它，尽管翻译会在以下情况下工作：应用程序正在运行。因此，只需取消选中此选项，一切都会好起来的。

Answer 9

如果您在 Angular 的延迟加载模块中使用翻译模块，则还需要将 TranslateModule 导入添加到延迟加载文件中的 module.ts 文件中。然后就可以了。

Answer 10

在我的情况下，我一直在使用不兼容的 @ngx-translate/core 版本，它不适合我的 Angular 版本。我建议参考下表，其中概述了每个 Angular 版本的兼容性： https://github.com/ngx-translate/core 确保您安装的版本与您正在使用的特定 Angular 版本一致。

Answer 11

我遇到了同样的错误，在各自的模块中添加 TranslateModule 。另外，请确保您已添加以下几点。

app.module.ts 课外：

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

内部进口：

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

子模块 - 导入：

TranslateModule

输出