错误：找不到管道“翻译”

Question

我正在使用 Angular 7.1，但不幸的是我无法使 ngx-translate 的翻译管道正常工作......

包.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] 都可以工作。

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

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

任何的想法？

Answer 1

我在角度上遇到了这些问题v12

错误场景：

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

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

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

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

问题消失了。

Answer 2

我有一个类似的问题，我通过在我的应用程序的共享模块中导入和导出 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>

Answer 3

对不起大家。这是一个简单的... TranslateModule 在 app.module 中被很好地加载，但不是 app-routing 模块，它是一个额外的惰性路由模块来加载应用程序组件。在那里添加它只是纠正了问题：

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