How to create a multi-apps project in Ionic 4? - ionic-framework

Question

I try to create a simple multi-apps project in Ionic 4, following the ionic documentation, but it doesn't work.
https://ionicframework.com/docs/cli/configuration#multi-app-projects
My config :
Ionic : v4.12.0
Angular CLI : 7.3.8
Node : 10.15.1
npm : 6.9.0
Windows 10
What I have done :
I have created a directory “monorepo”.
In this folder, I created a file ionic.config.json and pasted in it the code below:
{
"projects": {}
}
In monorepo, I create a second directory : apps.
In this directory (with the command prompt), I write the command :
ionic start "app1" --no-deps
monorepo/ionic.config.json is correctly populated with the data:
{
"projects": {
"app1": {
"name": "app1",
"integrations": {},
"type": "angular",
"root": "apps\\app1"
}
}
}
But when I try to serve the server, it won't work.
ionic serve --project app1 return me this error message :
> ng run app1:serve --host=0.0.0.0 --port=8100
[ng] Project 'app1' could not be found in workspace.
[ng] Error: Project 'app1' could not be found in workspace.
[ng] at Workspace.getProject (C:\Users\name\AppData\Roaming\npm\node_modules\#angular\cli\node_modules\#angular-devkit\core\src\workspace\workspace.js:93:19)
[ng] at Architect.getBuilderConfiguration (C:\Users\name\AppData\Roaming\npm\node_modules\#angular\cli\node_modules\#angular-devkit\architect\src\architect-legacy.js:117:41)
[ng] at RunCommand.runSingleTarget (C:\Users\name\AppData\Roaming\npm\node_modules\#angular\cli\models\architect-command.js:160:45)
[ng] at RunCommand.runArchitectTarget (C:\Users\name\AppData\Roaming\npm\node_modules\#angular\cli\models\architect-command.js:201:35)
[ng] at RunCommand.run (C:\Users\name\AppData\Roaming\npm\node_modules\#angular\cli\commands\run-impl.js:14:25)
[ng] at RunCommand.validateAndRun (C:\Users\name\AppData\Roaming\npm\node_modules\#angular\cli\models\command.js:124:31)
[ng] at process._tickCallback (internal/process/next_tick.js:68:7)
[ng] at Function.Module.runMain (internal/modules/cjs/loader.js:745:11)
[ng] at startup (internal/bootstrap/node.js:283:19)
[ng] at bootstrapNodeJSCore (internal/bootstrap/node.js:743:3)
[ERROR] ng has unexpectedly closed (exit code 1).
The Ionic CLI will exit. Please check any output above for error details.
When I go under the file associated with the error (workspace.js:93:19), and I do console.log, I obtain this info:
getProject(projectName) {
this._assertLoaded();
console.log("this.projectName : " + projectName); // this.projectName : app1
console.log("\n\nthis._workspace.projects : \n");
console.log(this._workspace.projects); // this._workspace.projects : app and app-e2e
const workspaceProject = this._workspace.projects[projectName];
(Values displayed are in comments).
The projectName variable seems ok. But the available project in this._workspace.projects are app and app-e2e which seem weird.
What is my problem ?
What did I miss ?

Answer 1

I managed to compile by replacing in the angular.json every app keyword by the name of my ionic project (here, app1).
{
"$schema": "./node_modules/#angular-devkit/core/src/workspace/workspace-schema.json",
"version": 1,
"defaultProject": "app1", <-- HERE
"newProjectRoot": "projects",
"projects": {
"app1": { <-- HERE
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app1", <-- NOT MANDATORY
"schematics": {},
"architect": {
"build": { ... },
"serve": {
"builder": "#angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "app1:build" <-- HERE
},
...
}
I suppose that instead of putting several angular apps within one project structure you should rewrite each ionic project's angular.json