茉莉花中的模板解析错误？

Question

UploadPage组件应创建一个UploadPage实例。 错误：模板解析错误： “ ion-buttons”不是已知元素：

这里是我的 upload.spec.ts

import { TestBed, ComponentFixture, async } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { IonicModule } from 'ionic-angular';

import { UploadPage } from './upload';

import { NavController } from 'ionic-angular';



describe('UploadPage Component', () => {

    let component:UploadPage;
    let fixture:ComponentFixture<UploadPage>;
    let de:DebugElement;
    let element:HTMLElement;
    let mockPaste:UploadPage[];

    beforeEach(() => { 
            TestBed.configureTestingModule ({
                declarations: [ UploadPage ], // declare the test component


            });
            fixture = TestBed.createComponent(UploadPage);
            comp = fixture.componentInstance;
            de = fixture.debugElement.query(By.css('.UploadPage'));
            element  = de.nativeElement;

    });
    it('should create an instance of UploadPage',() => {
        expect(fixture).toBeTruthy();
        expect(comp).toBeTruthy();
        expect(new UploadPage()).toBeTruthy();
    });
});

和 upload.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, Platform, AlertController } from 'ionic-angular';
import { Toaster } from '../../providers/providers';
import { TrimVideoPage } from '../trim-video/trim-video';
import { DomSanitizer } from '@angular/platform-browser';
import { Loading } from '../../providers/providers';
import { UploadPage } from './upload';
import { Utils } from '../../app/shared/utils';


/**
 * $ ionic generate page UploadPage
 *
 * 
 * Navigation:
 * https://ionicframework.com/docs/api/navigation/IonicPage/
 * https://ionicframework.com/docs/components/#navigation 
 */

const PAGE:string = "[UploadPage]";


/**
 * The @IonicPage decorator accepts a DeepLinkMetadataType object. 
 * This object accepts the following properties: 
 * name, segment, defaultHistory, and priority. 
 * All of them are optional but can be used to create complex navigation links.
 */
@IonicPage({
  name: 'upload',
  segment: 'upload'
})
@Component({
  selector: 'page-upload',
  templateUrl: 'upload.html',
  providers: [Utils]
})
export class UploadPage {



  VideoListType: any = "mydevice";
  VideoList: any = [];
  SelectedVideoIndex: number;
  duration = [];
  totalLength: number = 0;

  constructor(
    public toaster: Toaster,
    public loading: Loading,
    public navCtrl: NavController, 
    public navParams: NavParams,
    public alertCtrl: AlertController,
    public platform: Platform,
    private sanitizer: DomSanitizer,
    public utils: Utils
  ) {

// 
  }

  /*
    IONIC VIEW LIFECYCLE EVENTS
    https://ionicframework.com/docs/api/navigation/NavController/#lifecycle-events
  */

  /** 
   * Fired only when a view is stored in memory. 
   * This event is NOT fired on entering a view that is already cached. 
   * It’s a nice place for init related tasks.
   */
  ionViewDidLoad() {
  }
  /**
   * fired when entering a page, before it becomes the active one. 
   * Use it for tasks you want to do every time you enter in the view 
   * (setting event listeners, updating a table, etc.).
   */
  ionViewWillEnter() {
    console.log(`${PAGE} ionViewWillEnter`);
  }

  /**
   * Fired when you leave a page, before it stops being the active one. 
   * Use it for things you need to run every time you are leaving a page 
   * (deactivate event listeners, etc.).
   */
  ionViewWillLeave() {
    console.log(`${PAGE} ionViewWillLeave`);
    this.SelectedVideoIndex = -1;
    // prevent memory leak when component destroyed by unsubscribing from events (this.events.unsubscribe('ev',handler))
  }

  // toggle mydevice
  changeVideoListTypeToMydevice() {
    this.VideoListType = "mydevice";
  }

  // toggle online
  changeVideoListTypeToOnline() {
    this.VideoListType = "online";
  }

  // navigate to trim video page
  goToTrimVideo(video, index) {
    this.SelectedVideoIndex = index;
    setTimeout(() => {
      this.navCtrl.push(TrimVideoPage, {
        video: video,
        index: this.SelectedVideoIndex
      });
    }, 500);
  }

  // Load selected videos
  getSelectedVideos(event) {
    this.loading.showLoading();
    var files = event.target.files;
    console.log(`${PAGE} getSelectedVideos files=`,files);
    if(files.length == 0) {
      this.loading.hideLoading();
    }
    for (let i=0; i< files.length; i++) {
      if(files[i].type == 'video/mp4' || files[i].type == 'video/webm' || files[i].type == 'video/ogg') {
        let file = event.target.files[i];
        // console.log(file);
        let blobURL = URL.createObjectURL(file);
        // console.log(blobURL);
        this.utils.addToArrayUnique(this.VideoList, {
          video: this.sanitizer.bypassSecurityTrustUrl(blobURL+"#t=0.5"),
          name: files[i].name,
          type: files[i].type,
          size: files[i].size,
          date: files[i].lastModifiedDate
        });
      }
      else {
        let alert = this.alertCtrl.create({
          title: 'Filmstacker',
          subTitle: 'This video format is not supported',
          buttons: ['Ok']
        });
        alert.present();
        this.loading.hideLoading();
      }
    }
  }

  getCanvasBlob(canvas) {
    return new Promise(function(resolve, reject) {
      canvas.toBlob(function(blob) {
        resolve(blob)
      })
    })
  } 

  // load video data
  loadData(event, i) {
    this.platform.ready().then(() => {
      this.VideoList[i]["DurationInSeconds"] = event.target.duration;
      this.VideoList[i]["duration"] = this.utils.getTotalDuration([event.target.duration.toString()]);
      this.totalLength = this.VideoList.length;
      setTimeout(() => {
        if((i+1) == this.totalLength) {
          this.loading.hideLoading();
        }
      }, 1000);
    });
  }

}

和 upload.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { UploadPage } from './upload';

@NgModule({
  declarations: [
    UploadPage,
  ],
  imports: [
    IonicPageModule.forChild(UploadPage),
  ]
})
export class UploadPageModule {

    }

我运行此代码，它会生成模板解析错误，并且找不到html页面的组件和未定义的测试用例toBeTruthy（）方法。