No provider for ModalController

[aamado91]

I am implementing an application with Ionic 7.1.1 and angular 17.3.8 and this error is occurring when implementing the ionic-selectable component. Install version 5.0.0

[pcervera7747]

Same here

Ionic:

Ionic CLI : 7.2.0 Ionic Framework : @ionic/angular 8.2.7 @angular-devkit/build-angular : 18.2.1 @angular-devkit/schematics : 18.2.1 @angular/cli : 18.2.1 @ionic/angular-toolkit : 11.0.1

Capacitor:

Capacitor CLI : 6.1.2 @capacitor/android : 6.1.2 @capacitor/android : 6.1.2 @capacitor/core : 6.1.2 @capacitor/ios : 6.1.2

Utility:

cordova-res : not installed globally native-run : 2.0.1

System:

NodeJS : v22.3.0 (C:\Program Files\nodejs\node.exe) npm : 10.2.3 OS : Windows 10

ionic-selectable version is: "5.0.3"

[pcervera7747]

Hi again, the problem is that the ModalController import at ion-selectable.component.ts must be the standalone version:

import {ModalController} from "@ionic/angular/standalone";

Instead of:

import { IonItem, ModalController, Platform } from '@ionic/angular';

With this fix, the component works correctly.

Although there is a warning in the browser console:

ionic-selectable-modal.component.ts:13 [Ionic Warning]: NavParams has been deprecated in favor of using Angular's input API. Developers should migrate to either the @Input decorator or the Signals-based input API.

I'm trying to figure out how to solve it, i'll add a comment when I find out

[pcervera7747]

Hi again, the problem is that the ModalController import at ion-selectable.component.ts must be the standalone version:

import {ModalController} from "@ionic/angular/standalone";

Instead of:

import { IonItem, ModalController, Platform } from '@ionic/angular';

With this fix, the component works correctly.

Although there is a warning in the browser console:

ionic-selectable-modal.component.ts:13 [Ionic Warning]: NavParams has been deprecated in favor of using Angular's input API. Developers should migrate to either the @input decorator or the Signals-based input API.

I'm trying to figure out how to solve it, i'll add a comment when I find out

Solution for Ionic Selectable Component Warning

Regarding the warning mentioned earlier, it also has an easy fix: All necessary changes must be made in the ionic-selectable-modal.component.ts component.

Step 1: Decorate selectComponent with @Input()

Before:

selectComponent: IonicSelectableComponent;

After:

@Input() selectComponent: IonicSelectableComponent;

Step 2: Remove navParams from the constructor and move the code to OnInit

This ensures that the selectComponent parameter gets its value in time.

Before:

constructor(
    private navParams: NavParams,
    public _element: ElementRef,
  ) {
    this.selectComponent = this.navParams.get('selectComponent');
    this.selectComponent._modalComponent = this;
    this.selectComponent._selectedItems = [];

    if (!this.selectComponent._isNullOrWhiteSpace(this.selectComponent.value)) {
      if (this.selectComponent.isMultiple) {
        this.selectComponent.value.forEach((item: any) => {
          this.selectComponent._selectedItems.push(item);
        });
      } else {
        this.selectComponent._selectedItems.push(this.selectComponent.value);
      }
    }

    this.selectComponent._setItemsToConfirm(this.selectComponent._selectedItems);
  }

After:

constructor(public _element: ElementRef) {
    }

    ngOnInit(): void {
        this.selectComponent._modalComponent = this;
        this.selectComponent._selectedItems = [];

        if (!this.selectComponent._isNullOrWhiteSpace(this.selectComponent.value)) {
            if (this.selectComponent.isMultiple) {
                this.selectComponent.value.forEach((item: any) => {
                    this.selectComponent._selectedItems.push(item);
                });
            } else {
                this.selectComponent._selectedItems.push(this.selectComponent.value);
            }
        }

        this.selectComponent._setItemsToConfirm(this.selectComponent._selectedItems);
    }

Let me know if this fix sounds good to you