Unable to serve a multi-apps project

Ionic Framework
1

Hello,

I’m having an issue trying to create and launch a multi-applications project. I’m following the 3 steps from the documentation.

Ionic : v4.12.0
Angular CLI : 7.3.8
Node : 10.15.1
npm : 6.9.0
Windows 10

I create a directory “monorepo”.
In this folder, I create a file ionic.config.json and paste 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

ionic.config.json is correctly populated with the data:

{
  "projects": {
    "app1": {
      "name": "app1",
      "integrations": {},
      "type": "angular",
      "root": "apps\\app1"
    }
  }
}

Then I try to serve : ionic serve --project app1
And got this error :

> 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];
2

I have found a solution to be able to get 2 angular app in the same ionic project.

I modified the angular.json file for both of my apps.

under projects, I duplicate app and rename it app1. I currently have app, app1 and app-e2e in projects of angular.json. app and app1 are strictly similar except the name.

If I only rename app into app1, I got the exact same error which is weird.

[ng] Project 'app' could not be found in workspace.
[ng] Error: Project 'app' could not be found in workspace.

This modification allow me to run one of my project with the command ionic serve --project app1

But my original problem, which wasn’t specified in my original post, isn’t solved.

Is there a way to reuse components / pages / services of an Ionic 4 project in another Ionic 4 project ? With a hot reload when the “lib project” is modify.

I find a way to do it in Ionic 2:

And in Ionic 3 :

But I found no clue for Ionic 4.

Best regards.

3

I’ve spend few day to make it working for Ionic 4.

Here is a demo repository for supporting multiple Ionic apps in a single Angular workspace - https://github.com/sneat-opensource/ionic-ng-workspace

let me know if any issues.

1 Like