Impossible to setup a monorepo multi app project.

Description: I’ve been trying to setup a monorepo multi app project, I’ve read #3281 issue and most of the linked issues and commits, specially 2d53c99 and multi-app-projects.
And I think this is not working properly.

The angular.json is as it should be for multiple projects, as @stupidawesome pointed in that issue (#3281) and my ionic.config.json is like this:

{
  "defaultProject": "aclient-ionic-app",
  "projects": {
    "aclient-ionic-app": {
      "name": "IonicApp",
      "integrations": {
        "cordova": {
          "root": "integrations/aclient-ionic-app/cordova"
        }
      },
      "type": "angular",
      "root": "apps/aclient/ionic-app/"
    }
  },
  "anotherclient-anotherapp": {}
}

And I intend to a folder structure like this (or at least something that works):

.
├── apps
|   ├── aclient
|   |   ├── ionic-app
|   |   └── ionic-app-e2e
|   └── anotherclient
|   |   ├── anotherapp
|   |   └── anotherapp-e2e
├── integrations
|   ├── aclient-ionic-app
|   |   └── cordova
|   |       ├── build.json
|   |       ├── config.xml
|   |       ├── platforms
|   |       |   ├── ios
|   |       |   └── android
|   |       ├── plugins
|   |       ├── resources
|   |       └── www
|   └── anotherclient-anotherapp
|       ├── cordova
|       └── electron
├── node_modules
├── angular.json
├── ionic.config.json
└── package.json

The problem is that ionic integrations enable cordova --add --project aclient-ionic-app generates resources and config.xml inside apps/aclient/ionic-app and then automatically adds "integrations": { "cordova": {} } in the root of ionic.config.json ouside of projects. I don’t think that’s the intended behaviour.

Then I try ionic cordova platform add ios --project aclient-ionic-app and throws an error:

$ ionic cordova platform add ios --project aclient-ionic-app
✔ Creating ./integrations/aclient-ionic-app/cordova/www directory for you - done!
[ERROR] Cannot load Cordova config.

        Could not find necessary file(s): config.xml, package.json.

        - ./integrations/aclient-ionic-app/cordova/config.xml
        - ./integrations/aclient-ionic-app/cordova/package.json

        You can re-add the Cordova integration with the following command: ionic integrations enable cordova --add

So, to fix it in a hacky way I moved manually the file config.xml and the resources folder into integrations/aclient-ionic-app/cordova as well as initiate a npm folder inside cordova and thus creating the package.json.
Now running ionic cordova platform add ios --project aclient-ionic-app installs cordova plugins correctly. But the part that runs ionic cordova resources ios --force fails.

...
...
> ionic cordova resources ios --force
> cordova-res ios
[cordova-res] ERROR: Missing source image for "icon" (sources: resources/ios/icon.png, resources/ios/icon.jpg, resources/ios/icon.jpeg, resources/icon.png, resources/icon.jpg, resources/icon.jpeg)
[ERROR] An error occurred while running subprocess cordova-res.

        cordova-res ios exited with exit code 1.

        Re-running this command with the --verbose flag may provide more information.

Ignoring that error by now I pass to the next thing and then, when I run ionic cordova prepare ios --project aclient-ionic-app fails.
Output with verbose:

$ ionic cordova prepare ios --project aclient-ionic-app --verbose
  ionic:lib Terminal info: { ci: false, shell: '/usr/local/bin/bash', tty: true, windows: false } +0ms
  ionic:lib CLI global options: { _: [ 'cordova', 'prepare', 'ios' ], help: null, h: null, verbose: true, quiet: null, interactive: true, color: true, confirm: null, json: null, project: 'aclient-ionic-app', '--': [] } +4ms
  ionic:lib:project Project id from args: aclient-ionic-app +0ms
  ionic:lib:project Project type from config: @ionic/angular (angular) +0ms
  ionic:lib:project Project details: { configPath: '/Users/ignition42/monorepo/ionic.config.json', errors: [], context: 'multiapp', id: 'aclient-ionic-app', type: 'angular' } +0ms
  ionic Context: { binPath: '/usr/local/lib/node_modules/ionic/bin/ionic', libPath: '/usr/local/lib/node_modules/ionic', execPath: '/Users/ignition42/monorepo', version: '5.2.3' } +0ms
  ionic:lib:integrations:cordova:config Loading Cordova Config (config.xml: '/Users/ignition42/monorepo/integrations/aclient-ionic-app/cordova/config.xml', package.json: '/Users/ignition42/monorepo/integrations/aclient-ionic-app/cordova/package.json') +0ms
  ionic:lib:telemetry Sending telemetry for command: 'ionic cordova prepare' [ 'ios',
  ionic:lib:telemetry   '--verbose',
  ionic:lib:telemetry   '--interactive',
  ionic:lib:telemetry   '--color',
  ionic:lib:telemetry   '--project=aclient-ionic-app' ] +0ms
  ionic:lib:build build options: { '--': [],
  ionic:lib:build   engine: 'cordova',
  ionic:lib:build   platform: 'ios',
  ionic:lib:build   project: 'aclient-ionic-app',
  ionic:lib:build   verbose: false,
  ionic:lib:build   configuration: undefined,
  ionic:lib:build   sourcemaps: undefined,
  ionic:lib:build   cordovaAssets: true,
  ionic:lib:build   type: 'angular' } +0ms
Error: ENOENT: no such file or directory, open '/Users/ignition42/monorepo/apps/aclient/ionic-app/package.json'
  ionic Error: ENOENT: no such file or directory, open '/Users/ignition42/monorepo/apps/aclient/ionic-app/package.json' +132ms

Since before enabling cordova added "integrations": { "cordova": {} } in ionic.config.json I tried to add the root.

{
  "defaultProject": "aclient-ionic-app",
  "projects": {
    "aclient-ionic-app": {
      "name": "IonicApp",
      "integrations": {
        "cordova": {
          "root": "integrations/aclient-ionic-app/cordova"
        }
      },
      "type": "angular",
      "root": "apps/aclient/ionic-app/"
    }
  },
  "integrations": {
    "cordova": {
      "root": "integrations/aclient-ionic-app/cordova"
    }
  }
}

It didn’t help at all.

Last thing I tried is to copy all cordova files (config.xml, node_modules, package-lock.json, package.json, platforms, plugins, resources, www) into apps/aclient/ionic-app/ and then run ionic cordova prepare ios.

$ ionic cordova prepare ios --project aclient-ionic-app --verbose
  ionic:lib Terminal info: { ci: false, shell: '/usr/local/bin/bash', tty: true, windows: false } +0ms
  ionic:lib CLI global options: { _: [ 'cordova', 'prepare', 'ios' ], help: null, h: null, verbose: true, quiet: null, interactive: true, color: true, confirm: null, json: null, project: 'aclient-ionic-app', '--': [] } +3ms
  ionic:lib:project Project id from args: aclient-ionic-app +0ms
  ionic:lib:project Project type from config: @ionic/angular (angular) +0ms
  ionic:lib:project Project details: { configPath: '/Users/ignition42/monorepo/ionic.config.json', errors: [], context: 'multiapp', id: 'aclient-ionic-app', type: 'angular' } +0ms
  ionic Context: { binPath: '/usr/local/lib/node_modules/ionic/bin/ionic', libPath: '/usr/local/lib/node_modules/ionic', execPath: '/Users/ignition42/monorepo', version: '5.2.3' } +0ms
  ionic:lib:integrations:cordova:config Loading Cordova Config (config.xml: '/Users/ignition42/monorepo/integrations/aclient-ionic-app/cordova/config.xml', package.json: '/Users/ignition42/monorepo/integrations/aclient-ionic-app/cordova/package.json') +0ms
  ionic:lib:telemetry Sending telemetry for command: 'ionic cordova prepare' [ 'ios',
  ionic:lib:telemetry   '--verbose',
  ionic:lib:telemetry   '--interactive',
  ionic:lib:telemetry   '--color',
  ionic:lib:telemetry   '--project=aclient-ionic-app' ] +0ms
  ionic:lib:build build options: { '--': [],
  ionic:lib:build   engine: 'cordova',
  ionic:lib:build   platform: 'ios',
  ionic:lib:build   project: 'aclient-ionic-app',
  ionic:lib:build   verbose: false,
  ionic:lib:build   configuration: undefined,
  ionic:lib:build   sourcemaps: undefined,
  ionic:lib:build   cordovaAssets: true,
  ionic:lib:build   type: 'angular' } +0ms
  ionic:lib:hooks Looking for ionic:build:before npm script. +0ms
  ionic:lib:build Looking for ionic:build npm script. +8ms
> ng run aclient-ionic-app:ionic-cordova-build --platform=ios --cordova-base-path=/Users/ignition42/monorepo/integrations/aclient-ionic-app/cordova
Target 'ionic-cordova-build' could not be found in project 'aclient-ionic-app'.
Error: Target 'ionic-cordova-build' could not be found in project 'aclient-ionic-app'.
    at Architect._getProjectTarget (/Users/ignition42/monorepo/node_modules/@angular-devkit/architect/src/architect-legacy.js:111:19)
    at Architect.getBuilderConfiguration (/Users/ignition42/monorepo/node_modules/@angular-devkit/architect/src/architect-legacy.js:118:29)
    at RunCommand.runSingleTarget (/Users/ignition42/monorepo/node_modules/@angular/cli/models/architect-command.js:160:45)
    at RunCommand.runArchitectTarget (/Users/ignition42/monorepo/node_modules/@angular/cli/models/architect-command.js:201:35)
    at RunCommand.run (/Users/ignition42/monorepo/node_modules/@angular/cli/commands/run-impl.js:14:25)
    at RunCommand.validateAndRun (/Users/ignition42/monorepo/node_modules/@angular/cli/models/command.js:124:31)
    at process._tickCallback (internal/process/next_tick.js:68:7)
    at Function.Module.runMain (internal/modules/cjs/loader.js:832:11)
    at startup (internal/bootstrap/node.js:283:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3)
[ERROR] An error occurred while running subprocess ng.

        ng run aclient-ionic-app:ionic-cordova-build --platform=ios --cordova-base-path=... exited with exit code 1.

        Re-running this command with the --verbose flag may provide more information.
  ionic:utils-process onBeforeExit handler: 'process.exit' received +0ms
  ionic:utils-process onBeforeExit handler: running 1 functions +0ms
  ionic:utils-process processExit: exiting (exit code: 1) +32ms

Moving files around and trying to trick the system is not ideal, but I didn’t think of any other way to make it work, I think this is broken or I might have missed something.

My ionic info:

$ ionic info
[ERROR] Error loading @ionic/angular-toolkit package.json: Error: Cannot find module '@ionic/angular-toolkit/package'

Ionic:

   Ionic CLI                     : 5.2.3 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.6.2 (/Users/ignition42/monorepo/node_modules/@ionic/angular)
   @angular-devkit/build-angular : 0.13.9 (/Users/ignition42/monorepo/node_modules/@angular-devkit/build-angular)
   @angular-devkit/schematics    : 7.3.1 (/Users/ignition42/monorepo/node_modules/@angular-devkit/schematics)
   @angular/cli                  : 7.3.1 (/Users/ignition42/monorepo/node_modules/@angular/cli)
   @ionic/angular-toolkit        : not installed

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : ios 5.0.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.1.1, (and 4 other plugins)

Utility:

   cordova-res : 0.6.0
   native-run  : not installed

System:

   NodeJS : v10.16.0 (/usr/local/Cellar/node@10/10.16.0/bin/node)
   npm    : 6.9.0
   OS     : macOS Mojave

[stuartin]

@dwieeb Thanks for the instructions! I had a few problems running ionic generate commands getting: An unhandled exception occurred: Schematic "page" not found in collection "@schematics/angular".

Fix for me was ng config cli.defaultCollection @ionic/angular-toolkit and all my ionic generate commands work as expected

[y0nd0]

Ionic / Cordova still not work correctly. On ionic cordova build android --project=app-one it installs the native plugins, but fails on missing package.json in /apps/app-one/ directory. I defined the root to the workspace root. It works for the execution of cordova but not for the plugins installation.

I created my multi-app workspace like:

ng new --create-application=false --new-project-root='./apps' my-monorepo

cd my-monorepo/
ionic init --multi-app

ng generate application --minimal --prefix=app --routing --style=scss app-one
ng generate application --minimal --prefix=app --routing --style=scss app-two

ng add @ionic/angular --project=app-one
ng add @ionic/angular --project=app-two

cd apps/app-one/
ionic init app-one --type=angular --default --project-id=app-one

cd ..
cd ..

cd apps/app-two/
ionic init app-two --type=angular --default --project-id=app-two

Then adding cordova:

ionic cordova platform add android --project=app-one
ionic cordova platform add android --project=app-two

Workspace structure:

my-monorepo
|- apps
|  |- app-one
|  |  |- src/
|  |  |- tsconfig.app.json
|  |- app-two/
|- angular.json
|- config.xml
|- ionic.config.json
|- package.json
|- tsconfig.json
|- tslint.json

The ionic.config.json:

{
  "projects": {
    "app-one": {
      "name": "app-one",
      "integrations": {
        "cordova": {
          "root": "./"
        }
      },
      "type": "angular",
      "root": "apps/app-one"
    },
    "app-two": {
      "name": "app-two",
      "integrations": {
        "cordova": {
          "root": "./"
        }
      },
      "type": "angular",
      "root": "apps/app-two"
    }
  }
}

Btw. I can’t find any docs for the integrations > * > properties. I found the property root by accident.

Why only one config.xml? I’ll replace the app id, name, etc. later dynamically. All apps sharing the same dependencies and plugins.

Now I want to build the apk.

ionic cordova build android --project=app-one

> cordova.cmd platform add android --save

Using cordova-fetch for cordova-android@^9.0.0
Adding android project...
Creating Cordova project for the Android platform:
        Path: platforms\android
        Package: io.ionic.starter
        Name: MyApp
        Activity: MainActivity
        Android target: android-29
Subproject Path: CordovaLib
Subproject Path: app
Android project created with cordova-android@9.0.0
Plugin 'cordova-plugin-whitelist' found in config.xml... Migrating it to package.json
Plugin 'cordova-plugin-statusbar' found in config.xml... Migrating it to package.json
Plugin 'cordova-plugin-device' found in config.xml... Migrating it to package.json
Plugin 'cordova-plugin-splashscreen' found in config.xml... Migrating it to package.json
Plugin 'cordova-plugin-ionic-webview' found in config.xml... Migrating it to package.json
Plugin 'cordova-plugin-ionic-keyboard' found in config.xml... Migrating it to package.json
Discovered plugin "cordova-plugin-whitelist". Adding it to the project
Installing "cordova-plugin-whitelist" for android

  This plugin is only applicable for versions of cordova-android greater than 4.0. If you have a previous platform version, you do *not* need this plugin since the whitelist will be built in.

Adding cordova-plugin-whitelist to package.json
Discovered plugin "cordova-plugin-statusbar". Adding it to the project
Installing "cordova-plugin-statusbar" for android
Adding cordova-plugin-statusbar to package.json
Discovered plugin "cordova-plugin-device". Adding it to the project
Installing "cordova-plugin-device" for android
Adding cordova-plugin-device to package.json
Discovered plugin "cordova-plugin-splashscreen". Adding it to the project
Installing "cordova-plugin-splashscreen" for android
Adding cordova-plugin-splashscreen to package.json
Discovered plugin "cordova-plugin-ionic-webview". Adding it to the project
Installing "cordova-plugin-ionic-keyboard" for android
Adding cordova-plugin-ionic-keyboard to package.json

Error: ENOENT: no such file or directory, open
'C:\Users\User\projects\ionic\my-monorepo\apps\app-one\package.json

It should access the root package.json. 😞