I got the error "Template parse errors: The pipe 'translate' could not be found". It's working when I am using it only in RootPage but it's giving me error when I use it in other pages. In home page, I can translate label using translate. but when I try to use translate in addbundle page(scanpage). It's giving me pipe translate error.
"Template parse errors: The pipe 'translate' could not be found (" <ion-navbar> <ion-title>{{ [ERROR ->]'page_dashboard_title' | translate }}</ion-title><button class="navbtn" right (click)="openMenu()"><i"): ng:///ScanPageModule/ScanPage.html@9:18
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';
export function createTranslateLoader(http: HttpClient) {
return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}
import { HttpModule } from '@angular/http';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { MyApp } from './app.component';
import { AuthenticateProvider } from '../providers/authenticate/authenticate';
import { RestApiProvider } from '../providers/rest-api/rest-api';
import { TranslateProvider } from '../providers/translateprovider/translateprovider';
import { ScaninventoryPage } from './../pages/scaninventory/scaninventory';
//import { SavebundleinventoryPage } from './../pages/savebundleinventory/savebundleinventory';
import { HomePage } from '../pages/home/home';
import { MenuPage } from './../pages/menu/menu';
import { AuthenticatePage } from '../pages/authenticate/authenticate';
import { NgxQRCodeModule } from 'ngx-qrcode2';
import { BarcodeScanner } from '@ionic-native/barcode-scanner';
import { ScaninventoryPageModule } from '../pages/scaninventory/scaninventory.module';
import { ScanPage } from '../pages/scan/scan';
import { ScanPageModule } from '../pages/scan/scan.module';
//import { SavebundleinventoryPageModule } from '../pages/savebundleinventory/savebundleinventory.module';
import { ReportsPageModule } from '../pages/reports/reports.module';
import { ReportsPage } from '../pages/reports/reports';
/**
* Application module.
*/
@NgModule({
declarations: [
MyApp,
AuthenticatePage,
HomePage,
MenuPage
],
imports: [
BrowserModule,HttpClientModule,
IonicModule.forRoot(MyApp),
HttpModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: createTranslateLoader,
deps: [HttpClient]
}
}),
NgxQRCodeModule,
ScaninventoryPageModule,
ScanPageModule,
ReportsPageModule
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
AuthenticatePage,
HomePage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
AuthenticateProvider,
RestApiProvider,
TranslateProvider,
BarcodeScanner
]
})
export class AppModule {}
Here is my component.ts code. i import module for translator.
app.component.ts
import { Component, ViewChild } from '@angular/core';
import { AlertController ,Nav, Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { HomePage } from '../pages/home/home';
//import { SavebundleinventoryPage } from './../pages/savebundleinventory/savebundleinventory';
import { ScaninventoryPage } from './../pages/scaninventory/scaninventory';
import { ScanPage } from './../pages/scan/scan';
import { AuthenticatePage } from './../pages/authenticate/authenticate';
import { AuthenticateProvider } from '../providers/authenticate/authenticate';
import { TranslateService } from '@ngx-translate/core';
@Component({
templateUrl: 'app.html'
})
export class MyApp {
@ViewChild(Nav) nav: Nav;
rootPage: any = HomePage;
employeeselected: boolean = false;
pages: Array<{title: string, component: any}>;
public alertShown:boolean = false;
constructor(public translate: TranslateService,public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen,public authenticateProvider: AuthenticateProvider, public alertCtrl: AlertController) {
this.initializeApp();
this.translate.use('en');
// used for an example of ngFor and navigation
this.pages = [
{ title: 'Home', component: HomePage }
];
}
initializeApp() {
this.platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
this.statusBar.styleDefault();
this.splashScreen.hide();
if(localStorage.getItem('EmployeeId') != null){
this.employeeselected = true;
}else{
this.employeeselected = false;
}
this.platform.registerBackButtonAction(() => {
if (this.alertShown==false) {
this.presentConfirm();
}
}, 0)
});
}
presentConfirm() {
let alert = this.alertCtrl.create({
title: 'Confirm Exit',
message: 'Do you want Exit?',
buttons: [
{
text: 'Cancel',
role: 'cancel',
handler: () => {
console.log('Cancel clicked');
this.alertShown=false;
}
},
{
text: 'Yes',
handler: () => {
console.log('Yes clicked');
this.platform.exitApp();
}
}
]
});
alert.present().then(()=>{
this.alertShown=true;
});
}
public logout(): any {
localStorage.removeItem('EmployeeId')
this.authenticateProvider.clearAuthenticatedUser();
this.nav.setRoot(AuthenticatePage);
}
public openhomepage(): any {
this.nav.setRoot(HomePage);
}
addbundle(){
this.nav.push(ScanPage)
}
gotoreports(){
this.nav.push('ReportsPage');
//this.nav.setRoot(ReportsPage)
}
openPage() {
// Reset the content nav to have just this page
// we wouldn't want the back button to show in this scenario
//this.nav.setRoot(SavebundleinventoryPage);
this.nav.push(ScaninventoryPage)
}
}
Home.html
<ion-header>
<ion-navbar>
<ion-title>{{ 'page_dashboard_title' | translate }}</ion-title><button class="navbtn" right (click)="openMenu()">
<ion-icon name="menu"></ion-icon>
</button>
</ion-navbar>
</ion-header>
<ion-content class="grid-basic-page" padding>
<ion-grid>
<ion-row>
<ion-col col-4>
<ion-card *ngIf="employeeselected"><a (click)="GotoAddBundle()">
<img src="../../assets/imgs/ticket.png" />
<div class="card-title">{{ 'page_dashboard_label_addbundle' | translate }}</div>
</a>
</ion-card>
</ion-col>
<ion-col col-4>
<ion-card *ngIf="employeeselected"><a (click)="DailyInventory()">
<img src="../../assets/imgs/barcode.png" />
<div class="card-title">{{ 'page_dashboard_label_snapshot' | translate }}</div>
</a>
</ion-card>
</ion-col>
<ion-col col-4>
<ion-card *ngIf="employeeselected"><a (click)="ChangeUser()">
<img src="../../assets/imgs/employee.png" />
<div class="card-title">{{ 'page_dashboard_label_employees' | translate }}</div>
</a>
</ion-card>
</ion-col>
</ion-row>
<ion-row>
<ion-col col-4>
<ion-card *ngIf="employeeselected"><a (click)="GotoReports()">
<img src="../../assets/imgs/progress-report.png" />
<div class="card-title">{{ 'page_dashboard_label_reports' | translate }}</div>
</a>
</ion-card>
</ion-col>
<ion-col col-4>
<ion-card *ngIf="employeeselected"><a (click)="Logoutuser()">
<img src="../../assets/imgs/logout.png" />
<div class="card-title">{{ 'page_dashboard_label_logout' | translate }}</div>
</a>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
<ion-list *ngIf="!employeeselected">
<ion-item class="width50" *ngFor="let c of employees" (click)="GotoScanPage(c.EmployeeId)">
<ion-col>
<div class="avatar-container">
<img src="../assets/imgs/2.jpg" />
<div class="info"><label>{{c.Name}}</label>
<p>{{c.shift}}</p>
</div>
</div>
</ion-col>
</ion-item>
</ion-list>
</ion-content>
Scan.ts
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams,MenuController } from 'ionic-angular';
import { BarcodeScanner } from '@ionic-native/barcode-scanner';
import { RestApiProvider } from '../../providers/rest-api/rest-api';
import { TranslateService } from '@ngx-translate/core';
@IonicPage()
@Component({
selector: 'page-scan',
templateUrl: 'scan.html',
})
export class ScanPage {
//@ViewChild(Nav) nav: Nav;
qrData = null;
createdCode = null;
scannedCode = null;
constructor(public translate : TranslateService, public menuCtrl: MenuController, public navCtrl: NavController, public rest: RestApiProvider, public navParams: NavParams, private barcodeScanner: BarcodeScanner) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad ScanPage');
}
GotoScanInventoryPage() {
this.navCtrl.push('AddBundleConfirmPage');
}
GotoAddBunndlePage() {
this.navCtrl.push('AddbundlePage');
}
scanCode() {
this.barcodeScanner.scan().then(barcodeData => {
this.scannedCode = barcodeData.text;
this.scanCodeStatic(this.scannedCode)
this.navCtrl.push('AddbundlePage');
}, (err) => {
console.log('Error: ', err);
});
}
openMenu() {
this.menuCtrl.open();
}
SetDataScanEntry(obj){
console.log(obj)
localStorage.setItem('scanedobj', JSON.stringify(obj))
this.navCtrl.push('AddbundlePage');
}
errorMessage() {
}
}
Scan.html
<ion-header>
<ion-navbar>
<ion-title>{{ 'page_dashboard_title' | translate }}</ion-title><button class="navbtn" right (click)="openMenu()"><ion-icon name="menu"></ion-icon></button>
</ion-navbar>
</ion-header>
<ion-content padding>
<div class="scan-container">
<img src="../assets/imgs/scan.png"/>
<div class="info">
<h4 (click)="scanCode()" >Scan the QR code</h4>
<p>Please scan the QR code from you ticket. So we can import ticket details.</p>
</div>
</div>
<button ion-button full (click)="GotoAddBunndlePage()">Manual Entry</button>
</ion-content>
