Ion input doesn't work after upgrading to ion6

Hi to everyone, yesterday I tried to upgrade my ionic 5 angular 11 project to ionic 6 and angular 12.

Now every time I open a modal with inputs or buttons I get this error:

Uncaught InternalError: too much recursion
    invoke http://localhost:8100/polyfills.js:1
    run http://localhost:8100/polyfills.js:1
    runOutsideAngular http://localhost:8100/main.js:1
    onHandleError http://localhost:8100/main.js:1
    handleError http://localhost:8100/polyfills.js:1
    runTask http://localhost:8100/polyfills.js:1
    invokeTask http://localhost:8100/polyfills.js:1
    y http://localhost:8100/polyfills.js:1
    w http://localhost:8100/polyfills.js:1
    E http://localhost:8100/main.js:1
    Nt http://localhost:8100/main.js:1
    ye http://localhost:8100/main.js:1
    ye http://localhost:8100/main.js:1
    ye http://localhost:8100/main.js:1
    invokeTask http://localhost:8100/polyfills.js:1
    runTask http://localhost:8100/polyfills.js:1
    invokeTask http://localhost:8100/polyfills.js:1
    y http://localhost:8100/polyfills.js:1
    w http://localhost:8100/polyfills.js:1
    focusFirstDescendant http://localhost:8100/8220.js:1
    trapKeyboardFocus http://localhost:8100/8220.js:1
    handleFocus http://localhost:8100/8220.js:1
    invokeTask http://localhost:8100/polyfills.js:1
    onInvokeTask http://localhost:8100/main.js:1
    invokeTask http://localhost:8100/polyfills.js:1
    runTask http://localhost:8100/polyfills.js:1
    invokeTask http://localhost:8100/polyfills.js:1
    y http://localhost:8100/polyfills.js:1
    w http://localhost:8100/polyfills.js:1
    E http://localhost:8100/main.js:1
    Nt http://localhost:8100/main.js:1
    ye http://localhost:8100/main.js:1
    ye http://localhost:8100/main.js:1
    ye http://localhost:8100/main.js:1
    invokeTask http://localhost:8100/polyfills.js:1
    runTask http://localhost:8100/polyfills.js:1
    invokeTask http://localhost:8100/polyfills.js:1
    y http://localhost:8100/polyfills.js:1
    w http://localhost:8100/polyfills.js:1
    focusFirstDescendant http://localhost:8100/8220.js:1
    trapKeyboardFocus http://localhost:8100/8220.js:1
    handleFocus http://localhost:8100/8220.js:1
    invokeTask http://localhost:8100/polyfills.js:1
    onInvokeTask http://localhost:8100/main.js:1
    invokeTask http://localhost:8100/polyfills.js:1
    runTask http://localhost:8100/polyfills.js:1
    invokeTask http://localhost:8100/polyfills.js:1
    y http://localhost:8100/polyfills.js:1
    w http://localhost:8100/polyfills.js:1
    E http://localhost:8100/main.js:1
    Nt http://localhost:8100/main.js:1
    ye http://localhost:8100/main.js:1
    ye http://localhost:8100/main.js:1
    ye http://localhost:8100/main.js:1
    invokeTask http://localhost:8100/polyfills.js:1
    runTask http://localhost:8100/polyfills.js:1
    invokeTask http://localhost:8100/polyfills.js:1
    y http://localhost:8100/polyfills.js:1
    w http://localhost:8100/polyfills.js:1
    focusFirstDescendant http://localhost:8100/8220.js:1
    trapKeyboardFocus http://localhost:8100/8220.js:1
    handleFocus http://localhost:8100/8220.js:1
    invokeTask http://localhost:8100/polyfills.js:1
    onInvokeTask http://localhost:8100/main.js:1
    invokeTask http://localhost:8100/polyfills.js:1
    runTask http://localhost:8100/polyfills.js:1
    invokeTask http://localhost:8100/polyfills.js:1
    y http://localhost:8100/polyfills.js:1
    w http://localhost:8100/polyfills.js:1
    E http://localhost:8100/main.js:1
    Nt http://localhost:8100/main.js:1
    ye http://localhost:8100/main.js:1
    ye http://localhost:8100/main.js:1
    ye http://localhost:8100/main.js:1
    invokeTask http://localhost:8100/polyfills.js:1
    runTask http://localhost:8100/polyfills.js:1
    invokeTask http://localhost:8100/polyfills.js:1
    y http://localhost:8100/polyfills.js:1
    w http://localhost:8100/polyfills.js:1
    focusFirstDescendant http://localhost:8100/8220.js:1
    trapKeyboardFocus http://localhost:8100/8220.js:1
    handleFocus http://localhost:8100/8220.js:1
    invokeTask http://localhost:8100/polyfills.js:1
    onInvokeTask http://localhost:8100/main.js:1
    invokeTask http://localhost:8100/polyfills.js:1
    runTask http://localhost:8100/polyfills.js:1
    invokeTask http://localhost:8100/polyfills.js:1
    y http://localhost:8100/polyfills.js:1
    w http://localhost:8100/polyfills.js:1
    E http://localhost:8100/main.js:1
    Nt http://localhost:8100/main.js:1
    ye http://localhost:8100/main.js:1
    ye http://localhost:8100/main.js:1
    ye http://localhost:8100/main.js:1
    invokeTask http://localhost:8100/polyfills.js:1
    runTask http://localhost:8100/polyfills.js:1
    invokeTask http://localhost:8100/polyfills.js:1
    y http://localhost:8100/polyfills.js:1
    w http://localhost:8100/polyfills.js:1
    focusFirstDescendant http://localhost:8100/8220.js:1
    trapKeyboardFocus http://localhost:8100/8220.js:1
    handleFocus http://localhost:8100/8220.js:1
    invokeTask http://localhost:8100/polyfills.js:1
    onInvokeTask http://localhost:8100/main.js:1
    invokeTask http://localhost:8100/polyfills.js:1
    runTask http://localhost:8100/polyfills.js:1
    invokeTask http://localhost:8100/polyfills.js:1
    y http://localhost:8100/polyfills.js:1
    w http://localhost:8100/polyfills.js:1
    E http://localhost:8100/main.js:1
    Nt http://localhost:8100/main.js:1
    ye http://localhost:8100/main.js:1
    ye http://localhost:8100/main.js:1
    ye http://localhost:8100/main.js:1
    invokeTask http://localhost:8100/polyfills.js:1
    runTask http://localhost:8100/polyfills.js:1
    invokeTask http://localhost:8100/polyfills.js:1
    y http://localhost:8100/polyfills.js:1
    w http://localhost:8100/polyfills.js:1
    focusFirstDescendant http://localhost:8100/8220.js:1
    trapKeyboardFocus http://localhost:8100/8220.js:1
    handleFocus http://localhost:8100/8220.js:1
    invokeTask http://localhost:8100/polyfills.js:1
    onInvokeTask http://localhost:8100/main.js:1
    invokeTask http://localhost:8100/polyfills.js:1
    runTask http://localhost:8100/polyfills.js:1
    invokeTask http://localhost:8100/polyfills.js:1
    y http://localhost:8100/polyfills.js:1

So after trying to fix this with no success, I reverted the package.json to the previous working version, and I had to upgrade jasmine and capacitor versions to fix some npm errors.
Now the too much recursion error is disappeared, but I can’t use ion-inputs anymore. When I click on the input nothing happens, I can’t write on it. It only displays data if I pass it in the value property.

I don’t understand, for sure there is something missing in my package.json

This is my old package.json (with ionic 5 and angular 11):

 "dependencies": {
    "@angular/animations": "^11.2.10",
    "@angular/cdk": "^11.2.10",
    "@angular/common": "~11.2.10",
    "@angular/core": "~11.2.10",
    "@angular/forms": "~11.2.10",
    "@angular/material": "^11.2.10",
    "@angular/platform-browser": "~11.2.10",
    "@angular/platform-browser-dynamic": "~11.2.10",
    "@angular/router": "~11.2.10",
    "@capacitor/android": "^2.5.0",
    "@capacitor/core": "2.5.0",
    "@ionic/angular": "^5.6.6",
    "@ionic/pwa-elements": "^3.0.2",
    "@ngx-translate/core": "^13.0.0",
    "@ngx-translate/http-loader": "^6.0.0",
    "file-saver": "^2.0.5",
    "ionic-angular": "^3.9.10",
    "moment": "^2.29.1",
    "rxjs": "~6.6.0",
    "rxjs-compat": "^6.6.7",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1102.4",
    "@angular-eslint/builder": "2.0.2",
    "@angular-eslint/eslint-plugin": "2.0.2",
    "@angular-eslint/eslint-plugin-template": "2.0.2",
    "@angular-eslint/template-parser": "2.0.2",
    "@angular/cli": "~11.2.4",
    "@angular/compiler": "~11.2.0",
    "@angular/compiler-cli": "~11.2.0",
    "@angular/language-service": "~11.2.0",
    "@capacitor/cli": "2.5.0",
    "@ionic/angular-toolkit": "^3.1.1",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "@typescript-eslint/eslint-plugin": "4.16.1",
    "@typescript-eslint/parser": "4.16.1",
    "eslint": "^7.6.0",
    "eslint-plugin-import": "2.22.1",
    "eslint-plugin-jsdoc": "30.7.6",
    "eslint-plugin-prefer-arrow": "1.2.2",
    "jasmine-core": "~3.8.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.2.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "typescript": "~4.0.2"
  }

Is there something wrong with these configurations?

update all the packages to the latest version, you can try the –force option to npm install command

anyway my suggestion is to use this: https://www.npmjs.com/package/npm-check-updates

check what needs to be upgraded and then, after executing the command ncu -u (to update the package.json versions) do a sudo npm install --force

after this there is one thing that needs to be fixed:

in the tsconfg.json file:
image

Thank you for your response, I tried what you suggested, but I still have the same error.
By the way I noticed that this error doesn’t happen on the login page (the Login component is imported directly in app.module.ts, but only in the modules that use a common shared.module.ts file and are called after the login action. Hence I think this probably is not a dependency problem, but maybe a Ionic misconfiguration. I read ionic migration guide, but I don’t see any breaking changes that could cause the problem. My project was already configured with IonicModule.forRoot(), and modals seems to work in the same way of Ionic 5

(Reposting because I replied to wrong post…?)

It’s unclear what steps you took to upgrade but I personally didn’t run into this particular issue after upgrading. First make sure your project is still working when in Ionic 5 with none of the issues you mentioned.

Then go through these upgrade steps to update your project:

  1. Upgrade to Angular 12. Follow the install guide here (https://update.angular.io/).

  2. Update Ionic/Angular to 6. Follow the guide here. (Upgrading to Ionic 6 | Ionic Documentation)

  3. If after updating you are having any issues, remove node_modules directory and run npm install.

If this still doesn’t work, run npm outdated and paste the output here (after running through the steps above) and any new error messages you get from running the project.

No you replied to the correct post, but we posted simultaneously :grinning:
For upgrading, I manually changed the dipendencies of Ionic and Angular, but after seen the error, I reverted all to previous version and redo it like you said. I deleted package-lock.json and node_modules folder before doing npm install.

npm outdated shows nothing, it’s all at the latest version. I think it’s some misconfiguration problem, today I’ll try some solutions and let you know. Thank you for the response!

Found the problem!! The dependencies and configurations are ok, I simply used <ion-menu> not correctly.
Months ago, I wanted to have a side menu for my app, that in case of desktop version remains opened and had the possibility to be closed also for desktop. I didn’t use <ion-split-panel> because with this component you can’t close the menu for large screens.

So I found a workaround, I used a <ion-menu type="push"> catched willOpen and willClose events and I removed and added the css classes that blocked user click on the main page to make this work. It used to work, but now with Ionic 6 I have to change this to a <ion-split-panel> and make the things right.

Thanks for your time @ciccilleju and @bchehraz

2 Likes