'ionic serve' 后的错误（属性 'xxx' 在类型 (xxx) 上不存在）导致 "compilation failed"

Question

我正在开发一个 Angular/Ionic4 移动应用程序，当我 ionic serve 时运行遇到了这个错误。

错误图片：

第一次，错误结果是"failed to compile"，但如果我通过保存.ts文件重新启动它，而错误仍然存在，我得到"compiled successfully"反馈并且我的应用程序可以在浏览器中启动。我该如何解决？

这是我的 .json 文件的一部分。

{  
"data" : {
"__schema" : {
  "queryType" : {
    "name" : "Query"
  },
  "mutationType" : {
    "name" : "Mutation"
  },
  "subscriptionType" : {
    "name" : "Subscription"
  },
  "types" : [ {
    "kind" : "OBJECT",
    "name" : "Query",
    "description" : null,
    "fields" : [ {
      "name" : "getDelivery",
      "description" : null,
      "args" : [ {
        "name" : "id",
        "description" : null,
        "type" : {
          "kind" : "NON_NULL",
          "name" : null,
          "ofType" : {
            "kind" : "SCALAR",
            "name" : "ID",
            "ofType" : null
          }
        },
        "defaultValue" : null
      } ],
      "type" : {
        "kind" : "OBJECT",
        "name" : "Delivery",
        "ofType" : null
      },
      "isDeprecated" : false,
      "deprecationReason" : null
    }, {
      "name" : "listDeliveries",
      "description" : null,
      "args" : [ {
        "name" : "filter",
        "description" : null,
        "type" : {
          "kind" : "INPUT_OBJECT",
          "name" : "TableDeliveryFilterInput",
          "ofType" : null
        },
        "defaultValue" : null
      },

还有引发错误的文件。

import { Router } from '@angular/router';
import { AddressService } from './../../address.service';
import { Component, OnInit } from '@angular/core';
import { ConnexionService } from '../../connexion/connexion.service';
import { IonItemSliding } from '@ionic/angular';
import { Address } from '../../address.model';

@Component({
  selector: 'app-address',
  templateUrl: './address.page.html',
  styleUrls: ['./address.page.scss'],
})
export class AddressPage implements OnInit {
  loadedAddress: Address[] = [];
  isLoading = false;

  constructor(private addressService: AddressService, private connexionService: ConnexionService, private route: Router) { }

  ngOnInit() {
  }

  ionViewWillEnter() {
    this.loadedAddress.splice(0, this.loadedAddress.length);
    this.isLoading = true;
    this.addressService.getAddrByUser(this.connexionService.userConnected.sub)
    .then(add => {
      if (add.data.listAddresses.items.length > 0) {
        add.data.listAddresses.items.forEach(item => {
          this.loadedAddress.push(item);
        });
      }
      this.isLoading = false;
    })
    .catch(err => {
      console.log(err);
      this.isLoading = false;
    });
  }

  onDetail(id: string, slidingItem: IonItemSliding) {
    slidingItem.close();
    this.route.navigate(['/', 'detail-address', id]);
  }

  onCreateAddress() {
    this.route.navigateByUrl('new-address');
  }
}

我尝试了 Whosebug 上提出的大部分解决方案，但 none 仍然有效。

地址服务：

export class AddressService {

  constructor() { }

  async fetchAddress() {
    const del = await API.graphql(graphqlOperation(queries.listAddresses));
    return del;
  }

  async addAddr(nam: string, roads: string, zipcodes: string, laT: number, lnG: number, idUsers: string, city: string, country: string) {
    const newAddr = {
      name: nam,
      streetName: roads,
      city,
      country,
      zipcode: zipcodes,
      lat: laT,
      lng: lnG,
      idUser: idUsers
    };
    const ad = await API.graphql(graphqlOperation(mutations.createAddress, { input: newAddr }));
    return ad;
  }

  async getAddr(ID: string) {
    const oneAddr = await API.graphql(graphqlOperation(queries.listAddresses, {filter: {
      id: {eq: ID}
    }}));
    return oneAddr;
  }

  async getAddrByUser(ID: string) {
    const oneAddr = await API.graphql(graphqlOperation(queries.listAddresses, {filter: {
      idUser: {eq: ID}
    }}));
    return oneAddr;
  }

  async updateAddr(ID: string,
                   nam: string,
                   roads: string,
                   zipcodes: string,
                   laT: number,
                   lnG: number,
                   idUsers: string,
                   city: string,
                   country: string) {
    const upAddr = {
      id: ID,
      name: nam,
      streetName: roads,
      city,
      country,
      zipcode: zipcodes,
      lat: laT,
      lng: lnG,
      idUser: idUsers
    };
    const resp = await API.graphql(graphqlOperation(mutations.updateAddress, {input: upAddr}));
    return resp;
  }

  async cancelAddress(addressId: string) {
    const ad = await API.graphql(graphqlOperation(mutations.deleteAddress, {input: {id: addressId}}));
    return ad;
  }
}

Answer 1

作为测试，当您对相关对象施加 <any> 类型时，错误是否仍然显示，例如 (add:any) => {:

 ionViewWillEnter() {
    this.loadedAddress.splice(0, this.loadedAddress.length);
    this.isLoading = true;
    this.addressService.getAddrByUser(this.connexionService.userConnected.sub)
    .then((add:any) => {
      if (add.data.listAddresses.items.length > 0) {
        add.data.listAddresses.items.forEach(item => {
          this.loadedAddress.push(item);
        });
      }
      this.isLoading = false;
    })
    .catch(err => {
      console.log(err);
      this.isLoading = false;
    });
  }

这不是解决方案，而是朝着它迈出的一步。

'ionic serve' 后的错误（属性 'xxx' 在类型 (xxx) 上不存在）导致 "compilation failed"

Error after 'ionic serve' (property 'xxx' does not exist on type (xxx)) lead to "compilation failed"

typescript

graphql

angular

ionic4