Support multiple projects, shared libraries

Ionic version: (check one with “x”) [x] 4.x

I’m submitting a … (check one with “x”) [x] feature request

Current behavior:

Thank you for developing nice framework Ionic. As Ionic 4 alpha release, i am considering to managing Ionic project with multiple other angular apps in one repository.

...
node_modules/
projects/
    core/
    ionic-app/
        src/
        ionic.config.json
        ...
    pc/
        src/ 
    electron/
        src/ 
    mobile-web/
        src/ 
tsconfig.json
...

It means that we want to manage Ionic project on ./projects/ionic-app/ folder (not ./src/ folder) However, current state of ionic serve/build only support root folder & src folder access.

Expected behavior:

should support --root options for custom project root folder

ionic serve --root ./projects/ionic-app/ 
ionic build --root ./projects/ionic-app/ 

this feature really helpful for enterprise web services which supports multiple apps (pc, desktop, mobile, app).

Other information:

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

latest ionic 4.0.0-alpha.2

[stupidawesome]

I had a go at implementing a --project option using 4.0.0-rc.6 and so far it works for my purposes.

Assumptions

• You want a monorepo using one cordova application as a template to compile multiple angular projects.
• You’re using prebuild hooks and scripts to manage things like config.xml to change certain settings at build time.

For default behaviour we can use defaultProject in angular.json.

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "",
  "defaultProject": "your-app-name",
  "projects": {
    "your-app-name": { ... },
    "your-other-project": { ... }
  }
  ...
}

For my particular use case I’m using a project structure generated by Nrwl Nx 2.0.0-alpha.2 and merging it with a blank ionic template.

root
-- apps/
---- your-app-name/
---- your-other-app/
-- dist/
---- apps/
------ your-app-name/
------ your-other-app/
-- libs/
-- node_modules/
-- platforms/
-- plugins/
-- resources/
-- tools/
-- www/
---- (copied from dist/apps/<your-app-name> after ng build)
-- angular.json
-- config.xml
-- ionic.config.json
-- nx.json
-- tsconfig.json
-- tsconfig.spec.json
-- tslint.json

The paths to the root of each app are defined at projects.<your-app-name>.root in angular.json so I just read them from disk and extend the angular build options. The only part I’m unsure of is how to pipe the output from dist/apps/<your-app-name> to cordova. The easiest way would be to edit the projects.<your-app-name>.architect.build.options.outputPath entry in angular.json to point to www for each ionic angular app in your workspace. Ideally I just want ionic read from the output path and pass it to cordova but I can’t figure out how to make it do that. As a workaround I added an extra build step so that it copies files from dist/apps/<your-app-name> into www/ where cordova can pick it up. I can just override the --output-path to www/ when using ionic commands.

Now I can run these commands:

ionic serve [--project <your-app-name>]
ionic cordova <cmd> <platform> [--project <your-app-name>]

And I get multiple flavours of a single cordova app 👍 If --project is omitted it builds the defaultProject. For a standard install the default project is called app.

[imhoffd]

Tracked by https://github.com/ionic-team/ionic-cli/issues/3103 (and https://github.com/ionic-team/ionic-cli/issues/2232)

The ng-toolkit will be a set of builders for the new Angular Architect which Angular CLI 6 uses. More details soon ❤️