My Ionic 6 app with capacitor has been updated in the package.json file. These are the changes:
"dependencies": {
"@angular/common": "^15.1.0",
"@angular/core": "^15.1.0",
"@angular/forms": "^15.1.0",
"@angular/platform-browser": "^15.1.0",
"@angular/platform-browser-dynamic": "^15.1.0",
"@angular/router": "^15.1.0",
...
"zone.js": "~0.12.0"
},
...
"devDependencies": {
"@angular-devkit/build-angular": "^15.1.0",
"@angular-eslint/builder": "~15.1.0",
...
"typescript": "~4.9.4"
},
A side menu in my app used to function correctly with the following code:
app.component.html
<ion-app>
<ion-split-pane contentId="main-content">
...
</ion-app>
And the corresponding code in app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.scss'],
})
export class AppComponent {
constructor() { }
...
}
Recently, the selectedIndex in the side menu stopped working, showing these errors in the console:
[ng] Error: src/app/app.component.html:7:32 - error TS2339: Property 'selectedIndex' does not exist on type 'AppComponent'.
...
[ng] Error: src/app/app.component.html:8:48 - error TS2339: Property 'selectedIndex' does not exist on type 'AppComponent'.
I checked the Angular migration guide at this link but couldn't find any reference to the issue with selectedIndex.
Update:
Angular.json
{
...
}