Angular Template 解析错误：找不到管道答案

【问题标题】：Angular Template parse errors: The pipe could not be foundAngular Template 解析错误：找不到管道
【发布时间】：2018-09-22 03:36:35
【问题描述】：

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { HttpModule, Http } from '@angular/http';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

export function createTranslateLoader(http: Http) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    HttpModule,
    BrowserModule,
    IonicModule.forRoot(MyApp),
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (createTranslateLoader),
        deps: [Http]
      }
    })
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

关于.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { TranslateService } from '@ngx-translate/core';

@IonicPage()
@Component({
  selector: 'page-about',
  templateUrl: 'about.html',
})
export class AboutPage {

  constructor(public navCtrl: NavController, public navParams: NavParams, public translate: TranslateService) {
    this.translate.setDefaultLang('en');
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad AboutPage');
  }

}

关于.html

<ion-header>

  <ion-navbar>
    <ion-title>{{ 'HELLO' | translate }}</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>

</ion-content>

错误：

错误：未捕获（承诺）：错误：模板解析错误：管道找不到“翻译”（“

{{ [错误->]'你好' |翻译}}

"): ng:///AboutPageModule/AboutPage.html@3:18 错误：模板解析错误：找不到管道“翻译”（“

{{ [错误->]'你好' |翻译}}

"): ng:///AboutPageModule/AboutPage.html@3:18 在 syntaxError (http://localhost:8100/build/vendor.js:82250:34) 在 TemplateParser.parse (http://localhost:8100/build/vendor.js:106433:19) 在 JitCompiler._parseTemplate (http://localhost:8100/build/vendor.js:116386:37) 在 JitCompiler._compileTemplate (http://localhost:8100/build/vendor.js:116361:23) 在http://localhost:8100/build/vendor.js:116262:62 在 Set.forEach() 在 JitCompiler._compileComponents (http://localhost:8100/build/vendor.js:116262:19) 在http://localhost:8100/build/vendor.js:116132:19 在 Object.then (http://localhost:8100/build/vendor.js:82239:77) 在 JitCompiler._compileModuleAndComponents (http://localhost:8100/build/vendor.js:116131:26) 在 c (http://localhost:8100/build/polyfills.js:3:19752) 在 c (http://localhost:8100/build/polyfills.js:3:19461) 在http://localhost:8100/build/polyfills.js:3:20233 在 t.invokeTask (http://localhost:8100/build/polyfills.js:3:15660) 在 Object.onInvokeTask (http://localhost:8100/build/vendor.js:5114:33) 在 t.invokeTask (http://localhost:8100/build/polyfills.js:3:15581) 在 r.runTask (http://localhost:8100/build/polyfills.js:3:10834) 在 o (http://localhost:8100/build/polyfills.js:3:7894)

相同的代码在根主页中像魅力一样工作。请帮助我如何解决这个问题？

【问题讨论】：

不应该像.. | translate:param 这样param 是实际值。这就是documentation describes。我认为您在这里混淆了适用于HELLO 的“翻译”，它实际上适用于{ value: 'world' } 部分。
我的回答对你有帮助吗？

标签： javascript node.js angular ionic-framework ionic3

【解决方案1】：

我猜你应该将TranslateModule 添加到AboutPageModule 的imports 数组中：

@NgModule({
  imports: [
    ...,
    TranslateModule
  ],
  declarations: [AboutPage],
  ...
})
export class AboutPageModule {}

如果你有共享模块，那么你可以在那里添加这个模块

@NgModule({
  ...,
  exports: [
    ...,
    TranslateModule
  ]
})
export class SharedModule {}

之后，以下内容也应该起作用：

@NgModule({
  imports: [
    ...,
    SharedModule
  ],
  declarations: [AboutPage],
  ...
})
export class AboutPageModule {}

另见：

Angular 2 Use component from another module

【讨论】：

【解决方案2】：

有两件事，

(i) 您也应该在子模块中导入 TranslateModule。

(ii) 使用 HttpClientModule 代替 HttpModule

import { HttpClient, HttpClientModule } from "@angular/common/http"

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

【讨论】：

【解决方案3】：

不要忘记在 TranslateModule 中导出管道

【讨论】：

【解决方案4】：

我通过以下方式解决了同样的问题：

   TestBed.configureTestingModule({
      imports: [
        FormsModule,
        ReactiveFormsModule,
        PipesModule
      ],
   ....

这里，“PipesModule”是关键。

【讨论】：