Support multiple projects, shared libraries

[ionitron-bot]

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

[imhoffd]

@leo6104 The CLI detects the current working directory, then works its way back until it finds an ionic.config.json file, and uses that directory as the project root. Is there a reason you cannot cd projects/ionic-app && ionic serve? Is it just that it's a little annoying?

We could have a flag for setting the project a la TypeScript: ionic <cmd> --project projects/ionic-app/ionic.config.json.

[leo6104]

@dwieeb The reason is that most of project's dependency are same with other projects (which placed on projects folder) so we want to manage dependency on root folder package.json file.

https://github.com/angular/angular/blob/master/package.json
Angular also manage one package.json for multiple packages. (Of course, they have pacakge.json for each library but the package.json only define peerDependency)

Repository structure

node_modules/
projects/
    ionic-app
    pc
    mobile
    electron-desktop
package.json -> we manage all dependency on here

Current Ionic cli use case 1

cd projects/ionic-app/ && ionic serve without proejcts/ionic-app/node_modules show the message

$ ionic serve
? Looks like a fresh checkout! No ./node_modules directory found. Would you like to install project dependencies? No
FILE_NOT_FOUND

Current Ionic cli use case 2

ionic serve --project projects/ionic-app/ionic.config.json show the message

$ ionic serve --project projects/app-ionic/ionic.config.json 
[ERROR] Sorry! ionic serve can only be run in an Ionic project directory.

        If this is a project you'd like to integrate with Ionic, create an ionic.config.json file.

[imhoffd]

@leo6104 Thanks, I made a note in our mega-issue for configurable project structures: #2232

The --project was a suggestion for a feature. It doesn't exist yet and might not.

There's a lot to think about when we go to add monorepo support, especially as we plan to support different frameworks.

[leo6104]

@dwieeb Oh i missed some points for this issue.

Please consider ng serve --project use case (or ng build --project).
If we manage Ionic/PC/Electron project in monorepo, we have to specify --project {app_name} option in ng command. (ex, ng serve --project mapia-app-ionic ).
Because ng serve cannot determine which project we want to serve in monorepo structure.
Current ionic cli proxy ng serve without --project option. If we implement --project option like above case (--project projects/app-ionic/ionic.config.json), it might be conflict with ng command option interface.

My suggestion:

1. --ionic-config projects/ionic-app/ionic.config.json
2. proxy --project to ng command.

Please consider it for Angular 6 & different frameworks.
Thank you for comment and commit. 😄

[imhoffd]

Thanks @leo6104! Very helpful.

Would it make sense to you if an Ionic App was only ever tied to a single Angular project? I'm thinking in the ionic.config.json file we have a setting like this:

  "ng": {
    "project": "app"
  }

"app" would refer to the key in "projects" object of angular.json

What do you think?

[leo6104]

@dwieeb I agree 👍

1. Your solution seems to be better than my suggestion. I agree with the point we should separate ng command arguments with ionic command arguments to support different frameworks (react, stencil).
2. I think this feature is not only meaningful in the case of monorepo, but also in the case of a single project.
   A single angular project also require --project option specification if we implements Server Side Rendering feature on the project.
   To implement SSR in a single angular project, we have to define new project (build configuration) with using @angular-devkit/build-angular:server builder.

angular.json file (support SSR feature in single project)

{
    "projects": {
         "app": {
            "architect": {
               "build": {
                  "builder": "@angular-devkit/build-angular:browser",
                  ...
                }
             }
             ...
         },
         "app-ssr": {
            "architect": {
               "build": {
                   "builder": "@angular-devkit/build-angular:server",
                   ...
                }
             }
             ...
         }
     }
}

command use case

ng build --project app && ng build --project app-ssr

[imhoffd]

Angular 6 CLI seems to have a new way of specifying which app to build/serve:

See https://github.com/angular/angular-cli/wiki/stories-multiple-projects and https://github.com/angular/angular-cli/wiki/stories-create-library

[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.