Angular Monorepo

This guide will help you setup the Ionic CLI in a new or existing Angular monorepo using the multi-app project feature.

Note: Only the official Angular schematics are officially supported. Third-party schematics may not work, especially with Cordova. See #4329.

Make sure you have Ionic CLI 6.2.0+

npm i -g @ionic/cli@latest

Concepts

The Ionic CLI is decoupled from the Angular CLI by design. The Ionic CLI will not read from or write to angular.json. Instead, project commands (build, serve, and generate) invoke the Angular CLI with the appropriate Architect target, configuration, and options.

This means that some configuration may be duplicated between the Ionic CLI and Angular CLI, but only insofar as each app's ID, name, and directory. Additionally, the default project must also be configured in both ionic.config.json and angular.json.

New Monorepo using Angular CLI and ionic init

In this example, we want to use the Angular CLI to generate a monorepo and two applications: an Ionic app and a regular web app.

Even though this example has one Ionic app, we still want to use a multi-app project configuration because we're operating within a monorepo. Once properly configured, the Ionic CLI can run project commands from anywhere in the monorepo.

First we generate the new Angular project:

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

Initialize the monorepo as a multi-app project:

ionic init --multi-app

Generate the web app:

ng generate application --prefix=web --routing --style=css web

Generate an app and add Ionic to it:

ng generate application --prefix=app --routing --style=css app
ng add @ionic/angular --project=app

Finally, initialize the Ionic app with the Ionic CLI, marking it as the default project:

Note: Make sure the value of --project-id is the project key in angular.json. The Ionic CLI will use it to run the correct Angular CLI Architect command.

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

To test, run ionic serve in the root of your monorepo.

Troubleshooting

Schematic "page" not found in collection "@schematics/angular".

You'll need to set defaultCollection to the @ionic/angular-toolkit package. See this comment.