Cannot read properties of undefined (reading 'updateLicence') Ionic Angular-CodePudding

I am building the ionic angular application and am new to it (PHP by profession)

I have a page that has the following:

export class LicencesTabPage implements OnInit {

  public licencesData: any[] | void;

  constructor(
    protected licenceService: LicencesService,
    protected authService: AuthenticationService,
    protected modelController: ModalController,
    public conversions: DatetimeConversions,
  ) {
  }

  async ngOnInit() {
    this.getData();
  }

  async openDetailedModel(index) {
    const modal = await this.modelController.create({
      component: LicencesDetailedComponent,
      componentProps: {
        itemDetail: this.licencesData[index]
      }
    });

    modal.onDidDismiss().then((modelData) => {
      this.getData();
      if (modelData !== null) {
      }
    });

    return await modal.present();
  }

  protected async getData() {
    const userUUID = await this.authService.getStoredUuid();
    await this.licenceService.getLicences(userUUID).then(res => {
      this.licencesData = JSON.parse(JSON.stringify(res));
    });
  }
}

From this the user can open a model compoenet using the openDetailedModel method.

This is the modal component:

export class LicencesDetailedComponent implements OnInit {

  @Input()
  public itemDetail: any = [];
  protected returnValue: any;
  public editItem = false;

  public licencesCommonFunctions: LicencesCommonFunction;


  constructor(
    protected modalController: ModalController,
  ) {
    this.licencesCommonFunctions = new LicencesCommonFunction();
  }

  ngOnInit() {
  }

  openEdit() {

  }

  closeEdit() {
    this.editItem = false;
  }

  /**
   *
   * @param form
   */
  updateLicence(form: NgForm) {
    this.itemDetail = this.licencesCommonFunctions.newItem;
    this.licencesCommonFunctions.updateLicence(form);
  }

}

And from this a user can call the updateLicence() method which calls updateLicence() insied the licencesCommonFunctions class.

This is a shortened version of the licencesCommonFunctions class

export class LicencesCommonFunction implements OnInit {

  public newItem: any;
  protected licencesService: LicencesService;


  constructor() {
  }

  ngOnInit() {
  }


  /**
   *
   * @param form
   */
  updateLicence(form: NgForm) {
      
      this.licencesService.updateLicence(this.newItem).then(() => {
          this.showToast('Updated');
      });
  }
}

as seen the updateLicence method is call from the modal component which calls updateLicence which is part of the LicencesService

However when I try do do this from the modal component I get the following error: Cannot read properties of undefined (reading 'updateLicence')

However if I call the same from a page then it works no problem so it seems the LicencesService is not being registered when called from anywhere within the modal.

I am wondering if anyone knows how to fix this?

CodePudding user response：

You are not using dependency injection everywhere. In your page you do this :

 constructor(
    protected licenceService: LicencesService,
    protected authService: AuthenticationService,
    protected modelController: ModalController,
    public conversions: DatetimeConversions,
  ) {
  }

Where dependency injection inserts a licenseService instance.

However, your modal component tries to new up it's own dependencies :

  constructor(
    protected modalController: ModalController,
  ) {
    this.licencesCommonFunctions = new LicencesCommonFunction();
  }

And then in turn your licensesCommonFunctions doesn't new up the service at all, but also doesn't inject it :

  protected licencesService: LicencesService;

  constructor() {
  }

So realistically, anything calling the licensesService via your CommonFunction is going to have issues.

I would suggest your first port of call is to make your common function injectable

@Injectable({
  providedIn: 'root'
})
export class LicencesCommonFunction {
    constructor(private licensesService : LicensesService) {
    }
}

(also remove the OnInit as this is only for components, not services). Then use dependency injection via constructor to inject this into your components.

Overall, understanding how dependency injection works with Angular will help you here. If you are "newing up" services in Angular, it's very very likely you are doing something wrong if those services aren't simply static helper functions.