Converting angular to ionic & cordova getting cryptic errors when building

Ionic Framework Ionic Angular
1

I am trying to convert a working angular project to ionic so it can have some additional features as a mobile app with cordova, i have everything serving ok but when i try to build with

ionic cordova build ios

I am running into the following error which to my is cryptic and i have no idea where to fix it:

[ng] Schema validation failed with the following errors:
[ng] Data path “” should NOT have additional properties(allowedCommonJsDependencies).

My package.json file doesn’t have a property “allowedCommonJsDependencies” so i don’t know what it’s talking about!

Package.json

{
  "name": "org.apache.cordova.newapp",
  "displayName": "frontend",
  "version": "1.0.0",
  "description": "A sample Apache Cordova application that responds to the deviceready event.",
  "main": "index.js",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "build-prod": "node --max_old_space_size=5048 ./node_modules/@angular/cli/bin/ng build --prod"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^10.2.5",
    "@angular/cdk": "^8.2.3",
    "@angular/common": "^8.2.10",
    "@angular/compiler": "^8.2.10",
    "@angular/core": "^8.2.10",
    "@angular/flex-layout": "^8.0.0-beta.27",
    "@angular/forms": "^8.2.14",
    "@angular/http": "^7.2.16",
    "@angular/material": "^8.2.3",
    "@angular/platform-browser": "^8.2.10",
    "@angular/platform-browser-dynamic": "^8.2.10",
    "@angular/router": "^8.2.10",
    "@awesome-cordova-plugins/core": "^5.37.3",
    "@awesome-cordova-plugins/media-capture": "^5.37.3",
    "@ionic-native/in-app-browser": "^5.36.0",
    "@ionic-native/social-sharing": "^5.36.0",
    "@ionic/angular": "^5.9.3",
    "@ionic/core": "^5.8.4",
    "@ng-bootstrap/ng-bootstrap": "^5.3.1",
    "angular-calendar": "^0.28.28",
    "angular-flatpickr": "^3.6.6",
    "angular-linky": "^1.2.2",
    "angular-password-strength-meter": "^3.0.1",
    "angularx-flatpickr": "^6.6.0",
    "angularx-social-login": "^3.5.7",
    "cordova-plugin-camera": "^6.0.0",
    "cordova-plugin-firebase-messaging": "^6.1.0",
    "date-fns": "^2.25.0",
    "emoji-js": "^3.6.0",
    "flatpickr": "^4.6.9",
    "hammerjs": "^2.0.8",
    "ionicons": "^5.5.3",
    "jquery": "^3.6.0",
    "ng-socket-io": "^0.2.4",
    "ng2-file-upload": "^1.4.0",
    "ngb-modal": "^2.0.3",
    "ngx-emoji-picker": "0.0.2",
    "ngx-file-drop": "^10.1.1",
    "ngx-image-cropper": "^3.3.5",
    "ngx-infinite-scroll": "^9.1.0",
    "ngx-lightbox": "^2.5.1",
    "ngx-paypal": "^6.2.0",
    "ngx-toastr": "^11.3.3",
    "ngx-ui-loader": "^8.0.0",
    "rxjs": "^6.6.7",
    "rxjs-compat": "^6.6.7",
    "socket.io-client": "^2.4.0",
    "tslib": "^1.14.1",
    "ws": "^7.5.5",
    "zone.js": "~0.9.1",
    "zxcvbn3": "^0.1.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.803.29",
    "@angular/cli": "^8.3.29",
    "@angular/compiler-cli": "^8.2.10",
    "@angular/language-service": "^8.2.10",
    "@ionic/angular-toolkit": "latest",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "^2.0.10",
    "@types/node": "~8.9.4",
    "codelyzer": "^5.0.0",
    "cordova-android": "^9.1.0",
    "cordova-ios": "^6.2.0",
    "cordova-plugin-inappbrowser": "^5.0.0",
    "cordova-plugin-whitelist": "^1.3.4",
    "es6-promise-plugin": "^4.2.2",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.7.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.5.3",
    "cordova-plugin-statusbar": "2.4.2",
    "cordova-plugin-device": "2.0.2",
    "cordova-plugin-splashscreen": "5.0.2",
    "cordova-plugin-ionic-webview": "^4.0.0",
    "cordova-plugin-ionic-keyboard": "^2.0.5"
  },
  "keywords": [
    "ecosystem:cordova"
  ],
  "author": "Apache Cordova Team",
  "license": "Apache-2.0",
  "cordova": {
    "plugins": {
      "cordova-plugin-whitelist": {},
      "cordova-plugin-inappbrowser": {},
      "cordova-plugin-x-socialsharing": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {},
      "cordova-plugin-ionic-keyboard": {},
      "cordova-plugin-media-capture": {}
    },
    "platforms": [
      "android",
      "ios"
    ]
  }
}

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "app": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "www",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": false,
            "assets": [
              "src/favicon.ico",
              "src/assets",
              {
                "glob": "**/*.svg",
                "input": "node_modules/ionicons/dist/ionicons/svg",
                "output": "./svg"
              }
            ],
            "styles": [
              "./node_modules/ngx-lightbox/lightbox.css",
              "node_modules/angular-calendar/css/angular-calendar.css",
              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
              "src/styles.scss",
              {
                "input": "node_modules/@ionic/angular/css/core.css"
              },
              {
                "input": "node_modules/@ionic/angular/css/normalize.css"
              },
              {
                "input": "node_modules/@ionic/angular/css/structure.css"
              },
              {
                "input": "node_modules/@ionic/angular/css/typography.css"
              },
              {
                "input": "node_modules/@ionic/angular/css/display.css"
              },
              {
                "input": "node_modules/@ionic/angular/css/padding.css"
              },
              {
                "input": "node_modules/@ionic/angular/css/float-elements.css"
              },
              {
                "input": "node_modules/@ionic/angular/css/text-alignment.css"
              },
              {
                "input": "node_modules/@ionic/angular/css/text-transformation.css"
              },
              {
                "input": "node_modules/@ionic/angular/css/flex-utils.css"
              },
              {
                "input": "src/theme/variables.css"
              }
            ],
            "scripts": [
              "src/assets/js/emoji.js"
            ]
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "50mb",
                  "maximumError": "100mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "60mb",
                  "maximumError": "100mb"
                }
              ]
            },
            "staging": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.staging.ts"
                }
              ],
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "50mb",
                  "maximumError": "100mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "60mb",
                  "maximumError": "100mb"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "app:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "app:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "app:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": [
              "src/favicon.ico",
              "src/assets",
              {
                "glob": "**/*.svg",
                "input": "node_modules/ionicons/dist/ionicons/svg",
                "output": "./svg"
              }
            ],
            "styles": [
              "./node_modules/ngx-lightbox/lightbox.css",
              "node_modules/angular-calendar/css/angular-calendar.css",
              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
              "src/styles.scss"
            ],
            "scripts": [
              "src/assets/js/emoji.js"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "tsconfig.app.json",
              "tsconfig.spec.json",
              "e2e/tsconfig.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "app:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "app:serve:production"
            }
          }
        },
        "ionic-cordova-serve": {
          "builder": "@ionic/angular-toolkit:cordova-serve",
          "options": {
            "cordovaBuildTarget": "app:ionic-cordova-build",
            "devServerTarget": "app:serve"
          },
          "configurations": {
            "production": {
              "cordovaBuildTarget": "app:ionic-cordova-build:production",
              "devServerTarget": "app:serve:production"
            }
          }
        },
        "ionic-cordova-build": {
          "builder": "@ionic/angular-toolkit:cordova-build",
          "options": {
            "browserTarget": "app:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "app:build:production"
            }
          }
        }
      }
    }
  },
  "defaultProject": "app"
}
2

as first try i would start a blank project in ionic and then overwrite the SRC folder and, of course, setting up the app.module and some other configuration file

if this fails, i would try another way

3

In addition to the above, ionic 5 may not go well with angular 8. A quick search revealed a post where angular 9 was mentioned in relation to ionic 5.

So update.angular.io may be needed to help you with that

1 Like
4

In addition to the above, you’ve got an unholy hell of mixed major versions of Angular stuff. I’m sort of stunned that this worked as an Angular app. Make sure the major version (first number of X.Y.Z) is the same for all parts of @angular/*.

In addition to the above, I would highly recommend ignoring Cordova and using Capacitor instead.

1 Like
5

AMEN Brother.
To make the long story short: Cordova == hell, Capacitor == paradise

:slight_smile: trust us! :slight_smile:

6

Lol i have no experience with capacitor atm and this app is now quite old and it’s too much work to convert right now.

What i have noticed is that this error:

[ng] Schema validation failed with the following errors:
[ng] Data path “” should NOT have additional properties(allowedCommonJsDependencies).

Only happens when i include --livereload in the emulation/run command, without it it emulates and runs on a device just fine.

I wonder if that helps diagnose it? So when i run:

ionic cordova emulate ios --livereload

the actual command it runs:

ng run app:ionic-cordova-serve --host=localhost --port=8100 --platform=ios