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

Question

I'm developing an Angular/Ionic4 mobile app and I run into this error when I do ionic serve.

Error picture:

The first time, the error result is "failed to compile", but if I relaunch it by saving a .ts file, while the error is still there, I get "compiled successfully" feedback and my application can be launched in the browser. How can I fix it?

Here is a part of my .json file.

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

And there is the file where the error is raised.

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

I tried most of the solutions proposed on StackOverflow but none worked yet.

AddressService:

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

As a test, does the error still show when you impose an <any> type on the object in question, eg (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;
    });
  }

This is not meant to be the solution but a step towards it.