I am not sure why my Ionic5 / Capacitor project is misconfigured, but for most native plugins I try to install I end up with
[INFO] Looks like @angular/cli isn't installed in this project.
This package is required for this command to work properly.
? Install @angular/cli? (Y/n)
and a cascade of errors
> ng run app:build
An unhandled exception occurred: Cannot find module '@angular-devkit/build-angular/package.json'
See "/private/var/folders/1y/lt75p6d14lnfzw4gs645wtfw0000gn/T/ng-e8ZOkV/angular-errors.log" for further details.
I tried installing all missing packages manually with --save-dev but errors keep coming
npm install --save-dev @angular-devkit/build-angular@latest
...
> ng run app:build
An unhandled exception occurred: Cannot find module '@angular/compiler-cli'
and eventually I end up at
You seem to not be depending on "@angular/core" and/or "rxjs". This is an error.
How can I resolve the configuration and end up at a point where all works? Is there a magic ionic / capacitor command to update all to a consistent version or reset the project to a base configuration?
Here is my current package.json without any modifications.
{
"name": "HelloWorld",
"version": "1.2.3",
"author": "ME",
"homepage": "https://HelloWorld.com/",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"compodoc": "npx compodoc -p ./tsconfig.app.json"
},
"private": true,
"dependencies": {
"@angular/common": "^9.1.11",
"@angular/core": "^9.1.11",
"@angular/forms": "^9.1.11",
"@angular/platform-browser": "^9.1.11",
"@angular/platform-browser-dynamic": "^9.1.11",
"@angular/router": "^9.1.11",
"@capacitor/android": "^2.2.0",
"@capacitor/core": "^2.4.6",
"@capacitor/ios": "^2.2.0",
"@ionic-native/admob-free": "^5.31.1",
"@ionic-native/core": "^5.31.1",
"@ionic-native/firebase-analytics": "^5.31.1",
"@ionic-native/firebase-messaging": "^5.30.0",
"@ionic-native/geolocation": "^5.31.1",
"@ionic-native/social-sharing": "^5.31.1",
"@ionic-native/splash-screen": "^5.31.1",
"@ionic-native/status-bar": "^5.31.1",
"@ionic-native/youtube-video-player": "^5.31.1",
"@ionic/angular": "^5.5.4",
"@ionic/storage": "^2.2.0",
"@types/hammerjs": "^2.0.38",
"@types/moment-timezone": "^0.5.13",
"capacitor-plugin-app-tracking-transparency": "^2.0.0",
"cordova-admob-sdk": "^0.24.1",
"cordova-plugin-admob-free": "^0.27.0",
"cordova-plugin-androidx": "^3.0.0",
"cordova-plugin-firebase-analytics": "^5.0.0",
"cordova-plugin-firebase-messaging": "^5.0.0",
"cordova-plugin-geolocation": "^4.1.0",
"cordova-plugin-x-socialsharing": "^6.0.3",
"cordova-plugin-youtube-video-player": "^2.4.0",
"cordova-promise-polyfill": "0.0.2",
"cordova-support-android-plugin": "^1.0.2",
"cordova-support-google-services": "^1.4.1",
"d3": "^6.5.0",
"es6-promise-plugin": "^4.2.2",
"hammerjs": "^2.0.8",
"ion-bottom-drawer": "^2.0.0",
"ion2-calendar": "^3.5.0",
"moment": "^2.27.0",
"moment-timezone": "^0.5.31",
"rxjs": "^6.6.3",
"tslib": "^1.14.1",
"zone.js": "~0.10.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.901.14",
"@angular/cli": "9.1.9",
"@angular/compiler": "^9.1.11",
"@angular/compiler-cli": "^9.1.11",
"@angular/language-service": "^9.1.11",
"@capacitor/cli": "^2.4.6",
"@ionic/angular-toolkit": "^2.3.3",
"@ionic/lab": "3.1.6",
"@types/d3": "5.16.3",
"@types/jasmine": "^3.6.3",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^12.19.16",
"codelyzer": "^5.1.2",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "^5.0.9",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~2.1.0",
"karma-jasmine": "~3.0.1",
"karma-jasmine-html-reporter": "^1.4.2",
"protractor": "~5.4.3",
"ts-node": "~8.3.0",
"tslint": "^6.1.3",
"typescript": "~3.8.3"
},
"description": "An Ionic project"
}