javascript Angular 模板解析错误：找不到管道
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49788821/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular Template parse errors: The pipe could not be found
提问by shah rushabh
app.module.ts
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 {}
about.ts
关于.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');
}
}
about.html
关于.html
<ion-header>
<ion-navbar>
<ion-title>{{ 'HELLO' | translate }}</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
</ion-content>
Error:
错误：
Error: Uncaught (in promise): Error: Template parse errors: The pipe 'translate' could not be found ("
{{ [ERROR ->]'HELLO' | translate }}
"): ng:///AboutPageModule/AboutPage.html@3:18 Error: Template parse errors: The pipe 'translate' could not be found ("
{{ [ERROR ->]'HELLO' | translate }}
"): ng:///AboutPageModule/AboutPage.html@3:18 at syntaxError (http://localhost:8100/build/vendor.js:82250:34) at TemplateParser.parse (http://localhost:8100/build/vendor.js:106433:19) at JitCompiler._parseTemplate (http://localhost:8100/build/vendor.js:116386:37) at JitCompiler._compileTemplate (http://localhost:8100/build/vendor.js:116361:23) at http://localhost:8100/build/vendor.js:116262:62at Set.forEach () at JitCompiler._compileComponents (http://localhost:8100/build/vendor.js:116262:19) at http://localhost:8100/build/vendor.js:116132:19at Object.then (http://localhost:8100/build/vendor.js:82239:77) at JitCompiler._compileModuleAndComponents (http://localhost:8100/build/vendor.js:116131:26) at c (http://localhost:8100/build/polyfills.js:3:19752) at c (http://localhost:8100/build/polyfills.js:3:19461) at http://localhost:8100/build/polyfills.js:3:20233at t.invokeTask (http://localhost:8100/build/polyfills.js:3:15660) at Object.onInvokeTask (http://localhost:8100/build/vendor.js:5114:33) at t.invokeTask (http://localhost:8100/build/polyfills.js:3:15581) at r.runTask (http://localhost:8100/build/polyfills.js:3:10834) at o (http://localhost:8100/build/polyfills.js:3:7894)
错误：未捕获（承诺）：错误：模板解析错误：找不到管道“翻译”（“
{{ [错误 ->]'你好' | 翻译 }}
"): ng:///AboutPageModule/AboutPage.html@3:18 错误：模板解析错误：找不到管道“翻译”（“
{{ [错误 ->]'你好' | 翻译 }}
"): ng:///AboutPageModule/AboutPage.html@3:18 at syntaxError ( http://localhost:8100/build/vendor.js:82250:34) at 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: 20233at t.invokeTask ( http://localhost:8100/build/polyfills.js:3:15660) at Object.onInvokeTask ( http://localhost:8100/build/vendor.js:5114:33) at t。 invokeTask ( http://localhost:8100/build/polyfills.js:3:15581) at r.runTask ( http://localhost:8100/build/polyfills.js:3:10834) 在 o ( http://localhost:8100/build/polyfills.js:3:7894)
Same code working like charm in root home page. Plaease help me How can I solve this issue?
相同的代码在根主页中像魅力一样工作。请帮帮我 我该如何解决这个问题？
回答by yurzui
I guess you should add TranslateModuleto importsarray of your AboutPageModule:
我想你应该添加TranslateModule到imports你的数组中AboutPageModule：
@NgModule({
imports: [
...,
TranslateModule
],
declarations: [AboutPage],
...
})
export class AboutPageModule {}
If you have shared module then you can add this module there
如果你有共享模块，那么你可以在那里添加这个模块
@NgModule({
...,
exports: [
...,
TranslateModule
]
})
export class SharedModule {}
and after that the following should also work:
之后，以下内容也应该起作用：
@NgModule({
imports: [
...,
SharedModule
],
declarations: [AboutPage],
...
})
export class AboutPageModule {}
See also:
也可以看看：
回答by Sajeetharan
There are two things,
有两件事，
(i) you should import TranslateModuleinside your submodules as well.
(i) 你也应该TranslateModule在你的子模块中导入。
(ii) use HttpClientModuleinstead of HttpModule
(ii) 使用HttpClientModule代替HttpModule
import { HttpClient, HttpClientModule } from "@angular/common/http"
import { HttpClient, HttpClientModule } from "@angular/common/http"
export function HttpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}
回答by MartinZyk
Don't forget to export the Pipe in your TranslateModule
不要忘记在 TranslateModule 中导出管道
