Ionic 3 在第一次构建时出现错误

Question

当我“服务”我的 ionic 3 项目时，我有一个奇怪的行为。通过“ionic serve -l”服务后，我在控制台上看到以下错误：

Starting app-scripts server: --address 0.0.0.0 --port 8100 --livereload-port 35729 --dev-logger-port 53703 --nobrowser
--lab - Ctrl+C to cancel
[10:25:11]  watch started ...
[10:25:11]  build dev started ...
[10:25:11]  clean started ...
[10:25:11]  clean finished in 6 ms
[10:25:11]  copy started ...
[10:25:12]  deeplinks started ...
[10:25:12]  deeplinks finished in 67 ms
[10:25:12]  transpile started ...
[10:25:16]  typescript: src/app/app.component.ts, line: 25
            Type '({ title: string; component: typeof EventsPage; icon: string; } | { title: string; component: typ...'
            is not assignable to type '{ title: string; component: any; }[]'. Type '{ title: string; component: typeof
            EventsPage; icon: string; } | { title: string; component: type...' is not assignable to type '{ title:
            string; component: any; }'. Type '{ title: string; component: typeof EventsPage; icon: string; }' is not
            assignable to type '{ title: string; component: any; }'. Object literal may only specify known properties,
            and 'icon' does not exist in type '{ title: string; component: any; }'.

      L24:  this.pages = [
      L25:    { title: 'Events', component: EventsPage, icon: 'calendar' },
      L26:    { title: 'Merkliste', component: ListPage, icon: 'bookmark' },

[10:25:16]  typescript: src/pages/events/events.ts, line: 29
            Expected 1 arguments, but got 0.

      L28:    console.log("found events in local storage");
      L29:  } else {
      L30:    console.log("no events found in local storage");

[10:25:16]  typescript: src/pages/events/events.ts, line: 37
            A parameter property is only allowed in a constructor implementation.


[10:25:16]  typescript: src/pages/events/events.ts, line: 53
            Expected 1 arguments, but got 0.

      L53:    doRefresh(refresher) {
      L54:      console.log('Begin async operation', refresher);

[10:25:16]  typescript: src/pages/locations/locations.ts, line: 17
            Property 'locations' does not exist on type 'LocationsPage'.

      L16:  if(locations){
      L17:    this.locations = locations;
      L18:    console.log("found locations in local storage");

[...]some more errors here[..]

[10:25:16]  copy finished in 4.91 s
[10:25:16]  watch ready in 5.01 s

在再次保存文件 src/app/app.component.ts 之后，离子自动开始一个新的构建：

[10:28:44]  build started ...
[10:28:44]  deeplinks update started ...
[10:28:44]  deeplinks update finished in 130 ms
[10:28:44]  transpile update started ...
[10:28:44]  transpile update finished in 140 ms
[10:28:44]  webpack started ...
[10:28:56]  webpack finished in 11.90 s
[10:28:56]  sass started ...
Without `from` option PostCSS could generate wrong source map and will not find Browserslist config. Set it to CSS file path or to `undefined` to prevent this warning.
[10:28:59]  sass finished in 2.87 s
[10:28:59]  build finished in 15.10 s

[10:28:59]  build started ...
[10:28:59]  deeplinks update started ...
[10:28:59]  deeplinks update finished in 43 ms
[10:28:59]  transpile update started ...
[10:28:59]  transpile update finished in 60 ms
[10:28:59]  build finished in 149 ms

我的项目没有任何未来的错误出现。 但是在处理项目时，同样的错误再次发生（只是在处理 app.component.ts 以外的其他文件后不时发生）并且我必须再次保存 src/app/app.component.ts（不做任何更改文件 itselt) 以再次启动项目。

任何想法为什么会发生这种情况？

我使用的是 Ionic CLI 版本 3.20.0。 这是“离子信息”的输出：

cli packages: (/usr/local/lib/node_modules)

    @ionic/cli-utils  : 1.19.2
    ionic (Ionic CLI) : 3.20.0

global packages:

    cordova (Cordova CLI) : 8.0.0

local packages:

    @ionic/app-scripts : 3.1.10
    Cordova Platforms  : none
    Ionic Framework    : ionic-angular 3.9.2

System:

    Node : v8.11.3
    npm  : 5.6.0
    OS   : macOS High Sierra

Environment Variables:

    ANDROID_HOME : not set

Misc:

    backend : pro

app.component.ts 的来源：

import { Component, ViewChild } from '@angular/core';
import { Nav, Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { EventsPage } from '../pages/events/events';
import { LocationsPage } from '../pages/locations/locations';
import { ListPage } from '../pages/list/list';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;

  rootPage: any = EventsPage;

  pages: Array<{title: string, component: any}>;

  constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen) {
    this.initializeApp();

    // used for an example of ngFor and navigation
    this.pages = [
      { title: 'Events', component: EventsPage, icon: 'calendar' },
      { title: 'Merkliste', component: ListPage, icon: 'bookmark' },
      { title: 'Locations', component: LocationsPage, icon: 'home' },
      { title: 'Einloggen', component: ListPage, icon: 'log-in' }
    ];

  }

  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();
    });
  }

  openPage(page) {
    // Reset the content nav to have just this page
    // we wouldn't want the back button to show in this scenario
    this.nav.setRoot(page.component);
  }
}

事件来源.ts

import { Component } from '@angular/core';
import { ModalController, NavController } from 'ionic-angular';
import { Http } from '@angular/http';
import { AddItemPage } from '../add-item/add-item'
import { ItemDetailPage } from '../item-detail/item-detail';
import { EventPage } from '../event/event';
import { DataProvider } from '../../providers/data/data';
import 'rxjs/add/operator/map';

@Component({
  selector: 'page-events',
  templateUrl: 'events.html'
})
export class EventsPage {

  public events = [];

  constructor(public navCtrl: NavController, public modalCtrl: ModalController, public dataService: DataProvider, public http: Http) {

    this.dataService.getEvents().then((events) => {

      if(events){
        this.events = events;
        console.log("found events in local storage");
      } else {
        console.log("no events found in local storage");
        this.refreshEvents();
      }

    });

  }


  refreshEvents(public http: Http) {

    console.log("refreshing events");
    this.http.get('https://www.domain.tld/api/events').map(res => res.json()).subscribe(data => {
      this.events = data;
      this.dataService.saveEvents(this.events);
    });

  }

  ionViewDidLoad(){

  }

  doRefresh(refresher) {
    console.log('Begin async operation', refresher);
    this.refreshEvents();

    setTimeout(() => {
      console.log('Async operation has ended');
      refresher.complete();
    }, 2000);
  }

  addEvent(){

    let addModal = this.modalCtrl.create(AddItemPage);

    addModal.onDidDismiss((event) => {

          if(event){
            this.saveEvent(event);
          }

    });

    addModal.present();

  }

  saveEvent(event){
    this.events.push(event);
  }

  viewEvent(event_id){
    console.log("opening event " + event_id);
    this.navCtrl.push(EventPage, {
      event_id: event_id
    });
  }

}

Answer 1

Object literal may only specify known properties, and 'icon' does not exist in type '{ title: string; component: any; }'.

您不能使用值图标，因为它在该对象中不存在。