出现以下错误：找不到管道“翻译”

时间：2019-01-07 07:51:21

标签： angular

我正在使用Angular 7.1，但不幸的是，我无法使ngx-translate的转换管道正常工作……

package.json 

"dependencies": {
    "@angular/animations": "~7.1.0",
    "@angular/common": "~7.1.0",
    "@angular/compiler": "~7.1.0",
    "@angular/core": "~7.1.0",
    "@angular/forms": "~7.1.0",
    "@angular/http": "~7.1.0",
    "@angular/platform-browser": "~7.1.0",
    "@angular/platform-browser-dynamic": "~7.1.0",
    "@angular/platform-server": "~7.1.0",
    "@angular/router": "~7.1.0",
    "@angularclass/hmr": "~2.1.3",
    "@ngrx/store": "^7.0.0",
    "@nguniversal/express-engine": "~7.0.2",
    "@nguniversal/module-map-ngfactory-loader": "~7.0.2",
    "@ngx-translate/core": "^11.0.1",
    "@ngx-translate/http-loader": "^4.0.0",
    "core-js": "^2.5.7",
    "express": "^4.16.4",
    "rxjs": "~6.3.3",
    "zone.js": "~0.8.26"
}

app.module.ts 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

// import ngx-translate and the http loader
import {TranslateLoader, TranslateModule} from '@ngx-translate/core';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';
import {HttpClient, HttpClientModule} from '@angular/common/http';

export const APP_ID = 'test-app';

@NgModule({
  imports: [
    BrowserModule.withServerTransition({ appId: APP_ID }),
    AppRoutingModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    })
  ],
  exports: [ AppRoutingModule, TranslateModule ],
  providers: [],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

// required for AOT compilation
export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}

app.component.ts 

import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'app-root',
  template: `
    {{'demo.text' | translate}}
    <router-outlet></router-outlet>
  `
})
export class AppComponent {
  constructor(private translate: TranslateService) {
    translate.setDefaultLang('en');
    this.translate.get('demo.text').subscribe((text: string) => { console.log('HERE: ', text); });
  }
}

我可以看到TranslateService可以正常工作，因为它可以正确地成功转换并输出到控制台，但是管道或[translate]都可以正常工作。

  

错误：无法找到管道“ translate”（“ [错误->]   {{'demo.text'|翻译}}          “）

我看到这通常发生在导入中未正确加载TranslateModule的情况下，但情况似乎并非如此，因为在这里它已正确加载到app.module.ts中并在app.component.ts中使用，由app.module.ts引导...

有什么主意吗？

9 个答案:

答案 0 :(得分：2)

对不起。那是一个简单的... TranslateModule已很好地加载到app.module中，但没有加载到app-routing模块中，后者是一个额外的惰性路由器模块，用于加载app组件。 在那里添加它只是解决了问题：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { NotFoundComponent } from './not-found.component';
import {TranslateModule} from '@ngx-translate/core';

const routes: Routes = [
  { path: '', loadChildren: './welcome/welcome.module#WelcomeModule' },
  { path: '**', component: NotFoundComponent }
];

@NgModule({
  declarations: [
    AppComponent,
    NotFoundComponent,
  ],
  imports: [
    RouterModule.forRoot(routes),
    TranslateModule
  ],
  exports: [
    RouterModule,
  ]
})
export class AppRoutingModule { }

答案 1 :(得分：2)

如果在属于应用程序路由模块延迟加载的功能模块的模板中使用translation伪指令，则在TranslateModule文件的export数组中添加app-routing.module.ts条目： 

  exports: [
    RouterModule,
    TranslateModule
  ]

无需在同一文件的TranslateModule数组中添加import条目。

也无需在应用模块的TranslateModule数组中添加export条目。

此外，TranslateModule可以从自定义核心模块内导入，而不是从app模块内导入。在core.module.ts文件中的import数组中具有以下条目：

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

此文件的export数组中不需要任何条目。

在同一文件中，httpLoaderFactory函数在类之外定义：

export function httpLoaderFactory(httpClient: HttpClient) {
  return new TranslateHttpLoader(httpClient);
}

然后可以在应用程序组件中使用翻译服务：

export class AppComponent implements OnInit {
  constructor(
    private translateService: TranslateService,
  ) {
    // The default language used as a fallback if a translation isn't found for the current language
    translateService.setDefaultLang(LANGUAGE_CODE_ENGLISH);
    // The language to use
    translateService.use(LANGUAGE_CODE_ENGLISH);
  }

答案 2 :(得分：1)

您可以在引导程序中将其添加到您的PLATFORM_PIPES：

{提供：PLATFORM_PIPES，useValue：TranslatePipe，多：true} 这样，您就不必将其添加到组件的管道属性中

答案 3 :(得分：0)

我遇到了类似的问题，可以通过在应用程序的共享模块中导入和导出Translate模块来解决。我不认为它应该放在路由模块中。

所以我的设置如下： app.module 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AngularFireModule } from '@angular/fire';
import { ServiceWorkerModule } from '@angular/service-worker';
import { environment } from '../environments/environment';
import { AngularFireAuth} from '@angular/fire/auth';

import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

// AoT requires an exported function for factories
export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
    AngularFireModule.initializeApp(environment.firebase, 'VetCafe'),
    TranslateModule.forRoot({
      loader: {
          provide: TranslateLoader,
          useFactory: HttpLoaderFactory,
          deps: [HttpClient]
      }
  }),
    AppRoutingModule
  ],
  providers: [HttpClient, AngularFireAuth],
  bootstrap: [AppComponent]
})
export class AppModule { }

共享模块：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';

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

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    RouterModule,
    NgChatModule,
    TranslateModule
  ],
  exports: [
    CommonModule, FormsModule, ReactiveFormsModule, TranslateModule,
    RouterModule, NgChatModule
  ]
})
export class SharedModule { }

用于ui内容的共享ui.module：

import { FlexLayoutModule } from '@angular/flex-layout';
import { NgModule } from '@angular/core';
import { SharedModule } from '../shared/shared.module';
import { MatIconModule, MatButtonModule, MatSidenavModule, MatToolbarModule,
         MatCardModule, MatInputModule, MatDialogModule, MatTableModule,
         MatMenuModule, MatProgressSpinnerModule
       } from '@angular/material';

import { NavigationComponent } from './navigation/navigation.component';
import { FooterComponent } from './footer/footer.component';
import { SideNavigationComponent } from './side-navigation/side-navigation.component';

const matModules = [
  MatIconModule, MatButtonModule, MatSidenavModule, MatToolbarModule,
  MatCardModule, MatInputModule, MatDialogModule, MatTableModule,
  MatMenuModule, MatProgressSpinnerModule
];

const moduleComponents = [
  NavigationComponent, FooterComponent, SideNavigationComponent
];
@NgModule({
  declarations: [
    moduleComponents
  ],

  imports: [
    SharedModule,
    FlexLayoutModule,
    matModules
  ],

  exports: [
    FlexLayoutModule,
    matModules,
    moduleComponents
  ],
})
export class SharedUiModule { }

最后是我的组件模板：

<nav class="app-navigation" [class.mat-elevation-z2]="!isActive" >
  <mat-toolbar color="primary">
    <div fxHide.gt-xs>
        <button mat-icon-button (click)="onToggleSidenav()"> 
            <mat-icon>menu</mat-icon>
        </button>
    </div>
    <div>
        <a routerLink="/">{{'HOME.Title' | translate}}</a>
    </div>
    <div fxFlex fxLayout fxLayoutAlign="end" fxHide.xs>
        <ul fxLayout fxLayoutGap="15px" class="navigation-items">
            <li>
              <a mat-button [routerLink]="['/forms/appointments']" routerLinkActive="router-link-active" >appointments</a>
            </li>
            <li>
              <a mat-button [routerLink]="['/forms/clientreg']" routerLinkActive="router-link-active" >new client</a>
            </li>
            <li>
              <a mat-button [routerLink]="['/forms/euthanasia']" routerLinkActive="router-link-active" >euthanasia</a>
            </li>
            <li>
              <a mat-button [routerLink]="['/blog']" routerLinkActive="router-link-active" >blog</a>
            </li>
            <li>
              <a mat-button [routerLink]="['/services']" routerLinkActive="router-link-active" >Services</a>
            </li>
            <li>
              <a mat-button [routerLink]="['/legal/terms']" routerLinkActive="router-link-active" >terms</a>
            </li>
            <li>
              <a mat-button [routerLink]="['/legal/privacy']" routerLinkActive="router-link-active" >privacy</a>
            </li>
            <li *ngIf="!isLoggedIn">
              <a mat-button [routerLink]="['/account/signup']" routerLinkActive="router-link-active" >signup</a>
            </li>
            <li *ngIf="!isLoggedIn">
              <a mat-button [routerLink]="['/account/login']" routerLinkActive="router-link-active" >login</a>
            </li>
            <li *ngIf="isLoggedIn">
              <a mat-button (click)="isLoggedIn = false">Log Out</a>
            </li>

            <li >
              <a mat-button (click)="changeLocale()">Language</a>
            </li>

          </ul>
    </div>
  </mat-toolbar>

</nav>

答案 4 :(得分：0)

如果模块是延迟加载模块，请使用 TranslateModule.forChild 。

imports: [
        TranslateModule.forChild({
          loader: {
              provide: TranslateLoader,
              useFactory: (createTranslateLoader),
              deps: [HttpClient]
          },
          isolate: true
      }),]

答案 5 :(得分：0)

我遇到了同样的问题，我的组件没有在 app.module.ts 中声明

答案 6 :(得分：0)

值得一提的是，在极少数情况下出现此错误可能与您的管道实现无关。就我而言，某些服务方法中的恶意输入错误参数是罪魁祸首。重新运行该项目给了我正确的日志。因此，在开始拼命查看所有本地更改之前，请尝试重启。

答案 7 :(得分：0)

这可能是因为缺少 ngx-translate 服务的依赖注入。

import { TranslateService } from "@ngx-translate/core";

private translate: TranslateService 在您使用翻译管道的所有组件上添加到您的构造函数() 方法中

它对我来说很好

答案 8 :(得分：-1)

我在 angular v12

上遇到了这些问题

错误场景：

  1. 关于可视化代码。
  2. 创建了新项目。
  3. 添加了@ngx-translate 的内容。
  4. 完成所有与配置相关的翻译。
  5. 使用{{ 'something' | translate}}，即翻译管道。

错误显示为 The pipe 'translate' could not be found。

我尝试了所有解决方案，然后我意识到它的 IDE 问题，因为在终端上没有显示错误。所有代码运行顺利。

我只是关闭了可视化代码并再次打开。

问题消失了。

相关问题
最新问题