Ionic3 Angular6: ошибки синтаксического анализа шаблона: канал 'translate' не может быть найден на перемещаемых страницах

Я получил сообщение об ошибке «Ошибки синтаксического анализа шаблона: канал« translate »не найден». Он работает, когда я использую его только в RootPage, но выдает ошибку, когда я использую его на других страницах. На домашней странице я могу перевести ярлык с помощью translate. но когда я пытаюсь использовать перевод на странице добавления (страница сканирования). Это дает мне ошибку перевода трубы.

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

Вот мой код component.ts. Импортирую модуль для переводчика.

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';

импортировать {TranslateService} из '@ 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>