Multi-App Configuration Issue

[Domvel]

Describe the bug
https://ionicframework.com/docs/cli/configuration#config-file

In a multi-app project, apps share a single ionic.config.json file at the root of the repository instead of each app having their own.

Is this correct for the latest version of Ionic?
I created the multi-apps with no-deps parameter and both apps also have their own ionic-config.json. Also .gitignore, tslint.json, package.json.

To Reproduce

1. Create the root project. ionic start my-apps (blank template)
2. Open the ionic.config.json and add the property "projects": {}.
3. Create your apps by ionic start app1 --no-deps. (app1 and app2) (blank template)
4. See that every app has its own ionic.config.json.

Expected behavior
I'm not sure how the multi-app feature of Ionic works.
I though I have a root project with all the project files like package.json and ionic.config.json.
And the "sub-apps" only contains the sources without separated configuration files etc.
Ok they can have a package.json. But why are there all the dependencies, even though the root dependencies should be used? Or do I understand something wrong? Or is the documentation wrong?

Screenshots
If applicable, add screenshots to help explain your problem.

Browser and OS (please complete the following information):

• OS: Windows 10 Pro 64-bit (1903)
• Ionic CLI: 5.2.5

Additional context
I want to create one app base (root) with multi-app feature. Each apps should use the shared root components, services, etc. But an app can also have their own components.
TSLint, TSConfig, Unit-Test-Config, gitignore, etc. should be shared. But currently each subapp have a own config. Exactly the same. DRY.
Maybe this is a bug for the Ionic core repository or CLI? But perhaps it's only a documentation issue. I don't know who this should actual work. This is my first attempt of building a multi-app.
But the fact is, each app in a multi-app project has its own ionic.config.json. The docs says there should only be one shared in the root. Or does this mean, I should delete the config files in my sub-apps?

[imhoffd]

@Domvel The Ionic CLI doesn't have opinions about how you structure your monorepo. People could choose to have apps connected with a single angular.json or one for each app, or something in between. People could choose to install dependencies in each project or at the root, or something in between (this is what the Ionic CLI repo does, but it uses lerna to hoist dependencies). This goes for any of the tools which have config files and could be used at a higher level (.gitignore, tsconfig.*.json, tslint.json).

Remember, the CLI docs (aside from command reference) don't assume you're using Angular. One could create Ionic React apps alongside Ionic Angular apps and the multi-app feature would continue to work, blissfully unaware of the project's internals.

If you don't want these config files in your apps, delete them and make it work for your preferences.

[johneast]

I actually hit this issue last night. I have a mono-repo which contains back end code and multiple front end apps, the general structure is something like the following

- /apps/
---- /app1/
        ... An Angular App. No deps or angular.json here
---- /app2/
        ... An Angular App. No deps or angular.json here
- /back-end/
    ... back end source code and configuration
- /libs/
    ... shared code
- /node_modules/
    ... All deps for all projects here
- angular.json
- ionic.config.json
- package.json
- tsconfig.json

I came to add app3 using the ionic cli and tried the following command:

$ ionic start --no-deps
? Project name: apps/app3
? Starter template: sidemenu

The cli then went and made an app called apps-app-3 in the root of my repo. Where I was hoping it would make an app called app3 in the apps folder. So I deleted the project it had made and re-ran the command from the apps folder. Not much of a problem, however the cli assumes that you want to have an angular.json file in the project folder. For me (and a reasonable amount of people using mono-repos), I want to have one angular.json file in the root of my repo. To get to where I wanted to be I then had to copy the project property from the created angular.json and add it the one at the root of my repo, changing all of the paths and target names which was tedious.

I was wondering if it would be possible for the cli to infer values from an existing angular.json file if creating an angular app.

For instance, if creating a new angular ionic app, then the cli could use the newProjectRoot property from the angular.json file in the same folder if it exists.

Or, leave the start functionality the same, and add an application option to the generate command which adds an application to the existing workspace. This is similar to how ng allows you to create mutiple angular apps in the same workspace.

[imhoffd]

@johneast The apps-app-3 behavior is probably worth a separate issue.

As for the angular.json stuff, did you read my comment above? I'm not convinced the behavior should change at this moment. I understand that it's awkward to have to delete the extra angular.json and add the app config to the root angular.json. Let me go into why it likely won't change for a while:

Right now we use an old-fashioned way of starting projects. We download an archive that contains a working app, and make file changes from there. The Angular CLI and Vue CLI both use a more modern approach, where files and their contents are conditionally provisioned in a template/logic-based approach.

I would argue if we're going to start making changes to framework-based files (which change constantly, i.e. .angular-cli.json -> angular.json) after the starter is downloaded, then we should change our approach. See #3499 for this. This will require a lot of work, and it's work we likely won't be able to prioritize for a while.

[josh-m-sharpe]

"The Ionic CLI doesn't have opinions about how you structure your monorepo."

@dwieeb Then what is the Ionic CLI doing? Kinda detecting that ionic.config.json has a projects attr and stuffing config in that? And also honoring the --project flag and passing that onto lower level CLIs?

If the end result is that I still have to make manual changes to various angular.json(s) and modify them accordingly, shouldn't I have to do that for my ionic.config.json(s) as well? And if I have to do that, why bother with this ionic CLI at all?

What's extremely difficult to get past is that the docs as they stand today leave us with a non-functioning app. I understand there's a world of flexibility in setting up a monorepo, so maybe the CLI can't just create one, but if that's the case, could we work to build some example apps that others could leverage as a starting point?

[josh-m-sharpe]

I think it's also worth noting that the ionic CLI, generally speaking, is opinionated about how an app is structured. So we're all used to running ionic start and ionic generate and the CLI spitting out a viable app structure. This is an extremely positive thing.

But then this multi-tenant philosophy, without opinions, comes out of left field and leaves everyone spinning not knowing what to do.

[josh-m-sharpe]

@Domvel - it seems odd your apps each have an ionic.config.json. Mine don't. Check out this repo I put together. It has explicit steps based on the Ionic CLI Documentation (even a setup.sh script!) to create the repo. Did you do something different? In the steps you outlined above I don't see that you cd apps before running ionic start maybe that has something to do with it?

[imhoffd]

@josh-m-sharpe To be clear, I agree. I understand how Angular monorepos are expected to work, and that ng generate application has the intended effect, and that the equivalent functionality is missing in Ionic. I mentioned at the end of my second comment what I think is a prerequisite for continuing work on the multi-app feature.

What's implemented now is a bare-bones effort to get the Ionic CLI to even operate in a monorepo, which wasn't easy to begin with. Step 2 is adding intelligence around the framework files, which in my opinion requires us to rethink our starters. Luckily, Step 1 allowed the Ionic CLI to be flexible enough for power users to do what they needed to do.

What's extremely difficult to get past is that the docs as they stand today leave us with a non-functioning app

Yeah, we're missing a full tutorial for setting up an Ionic Angular monorepo, which would utilize the multi-app feature and the Angular monorepo feature. The docs as they are today are meant to be a reference for how the Ionic CLI deals with multiple apps in a project (not how to setup an opinionated, full-featured monorepo). We haven't pushed this feature very hard because it still requires manual work, but we should still have the documentation for what exists today. If you like, we can use your issue to track that.

[johneast]

@dwieeb Thanks for the reply.

I appreciate how awkward it can be to code against frameworks that can change at any given time. The process at the moment is a little awkward, however it is workable and the fact that once the projects in the repo are all set up everything works is great.

I like the sound of #3499. It definitely sounds like the way to go in order to make ionic start extensible and future proof.

Some documentation or walkthroughs about how to setup a mono-repo and add ionic projects to it would be good. I'd be happy to contribute if need be.

[Domvel]

Now I have my multi-app. 😓 But can't execute ionic cordova run android for a specific project.

Does not work:

ionic cordova run android --project=app1

Sorry! ionic cordova run can only be run in an Ionic project directory.

Workspace
(not all files listed)

root
|- src
|  |- libs (folder with shared stuff)
|  |- apps
|     |- app1 (same for app2)
|        |- main.ts
|        |- app.module.ts
|- angular.json
|- ionic.config.json
|- config.xml
|- package.json

ng serve --project=app1 works well.

Background of my workspace:
It's a monorepo with 2 apps with minimal differences. So the main part is in the libs folder.
There is a common package.json and deps. Also the android platform is shared.
Only the angular module is different because of some pages etc.
It works in browser when using the Angular CLI ng and project property.

But the Ionic commands does not work. I think the project option is ignored?
It tells me that there is no ionic.config.json but it is. Look:

ionic.config.json

{
  "name": "my-apps",
  "integrations": {
    "cordova": {}
  },
  "type": "angular",
  "projects": {
    "app1": {
      "name": "App1",
      "integrations": {
        "cordova": {}
      },
      "type": "angular",
      "root": "src/apps/app1"
    },
    "app2": {
      "name": "App2",
      "integrations": {
        "cordova": {}
      },
      "type": "angular",
      "root": "src/apps/app2"
    }
  }
}

Any my angular.json is also set up well, I think. Angular serve works well.
The json is huge. I post it on Stackblitz. I can't believe that the Angular config file is a json and no js-file. There is so much repeated code. But this is another topic. ... angular.json And heres the package.json

What are the criteria for the error message?

Sorry! ionic cordova run can only be run in an Ionic project directory.

If I run ionic init and enter the name, nothing will change. Because it already exists. What's wrong? 🤔

[imhoffd]

@Domvel I just walked through this again. Here's my repo: https://github.com/dwieeb/ionic-multiapp

I ran into a couple weird things with integrating Cordova, which must've been recent bugs, so I fixed them up: 167a68c and 4e8a226

I'm not getting the "can only be run in an Ionic project directory" error that you're seeing, though. Could you go through my steps and see where we might differ?

[Domvel]

@dwieeb Thanks. Yes, I did the same, more or less. I created the sub-apps manually without ionic start. But the workspace was initially create by the Ionic CLI. Whatever, I wondering how do Ionic detect a non-ionic repo?

Here is my workspace demo. ng serve works. It's a reduced minimal application from my original project. I hope I didn't missed anything. The philosophy of this project is to avoid code repetition. Also for the project setup. I don't want the same stuff for each app as copy. I use one setup and only load different Angular modules. Angulars apps only differs from the bootstrapped module. Only one package.json, tsconfig.ts etc. Also only one Cordova Android for both apps. The app-id is replaced later automatically in Jenkins or manually by scripts. The apps are really identically by the base. Only a few pages etc. are different. This should work.

Maybe the problem is that the apps do not have projects-setups like the root. I don't want a package.json etc. for each app. That's nonsense in my case. Because each app uses the same deps, same base etc. It sould only build the Angular app and wrap it in Cordova for Android. But what's wrong?

ionic info
[ERROR] Error while loading config (project config: .\ionic.config.json)

        Unknown project file structure. Run ionic init to re-initialize your Ionic project. Without a valid project
        config, the CLI will not have project context.

[WARN] You are not in an Ionic project directory. Project context may be missing.

Ionic:

   Ionic CLI : 5.2.5

Utility:

   cordova-res : not installed
   native-run  : 0.2.8

System:

   NodeJS : v10.15.3
   npm    : 6.4.1
   OS     : Windows 10

ionic init
? Project name: my-apps
[OK] Your Ionic project has been initialized!

(ionic init without changes.)