Hi, I’ve my package.json as:
{
“name”: “EduApp”,
“version”: “0.0.1”,
“author”: “Ionic Framework”,
“homepage”: “https://ionicframework.com/”,
“scripts”: {
“ng”: “ng”,
“start”: “ng serve”,
“build”: “ng build”,
“test”: “ng test”,
“lint”: “ng lint”,
“e2e”: “ng e2e”
},
“private”: true,
“dependencies”: {
“@angular/cdk”: “^17.3.8”,
“@angular/common”: “~17.3.0”,
“@angular/compiler”: “^17.3.0”,
“@angular/core”: “~17.3.0”,
“@angular/forms”: “~17.3.0”,
“@angular/google-maps”: “^17.3.8”,
“@angular/localize”: “~17.3.8”,
“@angular/platform-browser”: “~17.3.0”,
“@angular/platform-browser-dynamic”: “~17.3.0”,
“@angular/platform-server”: “^17.3.0”,
“@angular/router”: “~17.3.0”,
“@angular/ssr”: “^17.3.6”,
“@capacitor-community/capacitor-googlemaps-native”: “^1.2.0”,
“@capacitor/camera”: “^6.0.0”,
“@capacitor/core”: “^6.0.0”,
“@capacitor/filesystem”: “^6.0.0”,
“@capacitor/geolocation”: “^6.0.0”,
“@capacitor/ios”: “^6.0.0”,
“@capacitor/share”: “^6.0.0”,
“@ionic-native/core”: “^5.36.0”,
“@ionic-native/google-maps”: “^5.5.0”,
“@ionic-native/location-accuracy”: “^5.36.0”,
“@ionic/angular”: “^5.9.4”,
“@ionic/cli”: “^6.20.9”,
“@ionic/pwa-elements”: “^3.2.2”,
“@ng-bootstrap/ng-bootstrap”: “^9.1.3”,
“@ng-select/ng-select”: “^6.1.0”,
“@types/google-maps”: “^3.2.6”,
“bootstrap”: “^4.6.2”,
“install”: “^0.13.0”,
“ionic-rating”: “^2.0.0”,
“ionicons”: “^7.4.0”,
“ng-bootstrap”: “^1.6.3”,
“ng2-search-filter”: “^0.5.1”,
“ngx-bootstrap”: “^6.2.0”,
“ngx-pagination”: “^6.0.3”,
“npm”: “^10.7.0”,
“rxjs”: “^7.8.0”,
“tslib”: “^2.3.0”,
“zone.js”: “~0.14.3”
},
“devDependencies”: {
“@angular-devkit/build-angular”: “~17.3.6”,
“@angular/cli”: “^17.3.6”,
“@angular/compiler”: “~17.3.0”,
“@angular/compiler-cli”: “~17.3.0”,
“@angular/language-service”: “~17.3.0”,
“@capacitor/cli”: “^5.0.0”,
“@ionic/angular-toolkit”: “^11.0.1”,
“@types/googlemaps”: “^3.43.3”,
“@types/jasmine”: “^3.6.11”,
“@types/jasminewd2”: “^2.0.10”,
“@types/node”: “^12.20.55”,
“codelyzer”: “^6.0.0”,
“jasmine-core”: “~5.1.0”,
“jasmine-spec-reporter”: “~5.0.0”,
“karma”: “~6.4.0”,
“karma-chrome-launcher”: “^3.2.0”,
“karma-coverage”: “~2.2.0”,
“karma-coverage-istanbul-reporter”: “~2.1.0”,
“karma-jasmine”: “^5.1.0”,
“karma-jasmine-html-reporter”: “^2.1.0”,
“protractor”: “~7.0.0”,
“ts-node”: “~8.3.0”,
“tslint”: “~6.1.0”,
“typescript”: “5.4.2”
},
“description”: “An Ionic project”
}
After I npm update and npm start / ng serve to compile the app, I got the following msg:
./src/app/app.module.ts:7:0-88 - Error: Module not found: Error: Can’t resolve ‘node_modules/@angular/common/http’ in ‘/Users/jg/Desktop/eduApp ionic /EduApp/src/app’
./src/app/app.module.ts:12:0-70 - Error: Module not found: Error: Can’t resolve ‘node_modules/@angular/cdk/scrolling’ in ‘/Users/jg/Desktop/eduApp ionic /EduApp/src/app’
./src/polyfills.ts:4:0-45 - Error: Module not found: Error: Can’t resolve ‘node_modules/@angular/localize/init’ in ‘/Users/jg/Desktop/eduApp ionic /EduApp/src’
Error: node_modules/@ionic/core/node_modules/ionicons/dist/types/components.d.ts:66:15 - error TS2320: Interface ‘HTMLIonIconElement’ cannot simultaneously extend types ‘IonIcon’ and ‘HTMLStencilElement’.
Named property ‘ariaHidden’ of types ‘IonIcon’ and ‘HTMLStencilElement’ are not identical.
66 interface HTMLIonIconElement extends Components.IonIcon, HTMLStencilElement {
~~~~~~~~~~~~~~~~~~
Error: node_modules/@ionic/core/node_modules/ionicons/dist/types/components.d.ts:66:15 - error TS2320: Interface ‘HTMLIonIconElement’ cannot simultaneously extend types ‘IonIcon’ and ‘HTMLStencilElement’.
Named property ‘ariaLabel’ of types ‘IonIcon’ and ‘HTMLStencilElement’ are not identical.
66 interface HTMLIonIconElement extends Components.IonIcon, HTMLStencilElement {
~~~~~~~~~~~~~~~~~~
Error: node_modules/typescript/lib/lib.dom.d.ts:7297:101 - error TS2344: Type ‘HTMLElementTagNameMap[K]’ does not satisfy the constraint ‘Element’.
Type ‘HTMLElement | HTMLMetaElement | HTMLAnchorElement | HTMLAreaElement | HTMLAudioElement | … 150 more … | HTMLDetailsElement’ is not assignable to type ‘Element’.
Type ‘HTMLIonIconElement’ is not assignable to type ‘Element’.
Property ‘ariaHidden’ is optional in type ‘HTMLIonIconElement’ but required in type ‘Element’.
7297 getElementsByTagName(qualifiedName: K): HTMLCollectionOf<HTMLElementTagNameMap[K]>;
~~~~~~~~~~~~~~~~~~~~~~~~
Error: node_modules/typescript/lib/lib.dom.d.ts:7776:101 - error TS2344: Type ‘HTMLElementTagNameMap[K]’ does not satisfy the constraint ‘Element’.
Type ‘HTMLElement | HTMLMetaElement | HTMLAnchorElement | HTMLAreaElement | HTMLAudioElement | … 150 more … | HTMLDetailsElement’ is not assignable to type ‘Element’.
7776 getElementsByTagName(qualifiedName: K): HTMLCollectionOf<HTMLElementTagNameMap[K]>;
~~~~~~~~~~~~~~~~~~~~~~~~
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
Failed to compile. Pls advise how to rectify this node_modules incompatibility issue. Mnay Thanks.