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

Posted 2023-03-07

【中文标题】Angular Template 解析错误：找不到管道

【英文标题】：Angular Template parse errors: The pipe could not be found

【发布时间】：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' 部分。

我的回答对你有帮助吗？

【参考方案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”是关键。