0

I have an existing angular project, in which I need to add an ionic project so that I can use ionic serve to run the ionic project and ng serve to run the angular project.

I tried using ng add @ionic/angular and after creating a project using ionic init when I try ionic serve this error is thrown [ng] An unhandled exception occurred: Project does not exist.[ERROR] ng has unexpectedly closed (exit code 127). The Ionic CLI will exit. Please check any output above for error details.

Also tried this it doesn't work https://stack247.wordpress.com/2019/03/11/integrate-ionic-in-existing-angular-project/ Creates a new project folder for ionic which is not my requirement.

Ashok Naik
  • 206
  • 1
  • 7

1 Answers1

0

You can use an NX Workspace to have multiple apps (e.g. Angular, Ionic) alongside each other. This would implement the following structure to your repository:

/apps
  /angular-app
    /src       <-- Same as in a default Angular project
    tsconfig.json
    etc.
  /ionic-app
    /src       <-- Same as in a default Ionic project
    tsconfig.json
    etc.
/libs          <-- Shareable code between apps and other libs
nx.json
package.json
tsconfig.json
etc.

To do so I would recommend to set up a completely new nx workspace by

npx create-nx-workspace NAME

replace NAME with your repository name and change your current directory to the newly created. It will ask you if you want to initialise a default application. You can pick an Angular application here and copy over all your Angular code. Then you can run

ng g @nrwl/angular:application ionic-app

followed by (if you have the ionic CLI installed, otherwise install it first by running npm install -g @ionic/cli)

ionic init "ionic-app" --type=angular

You'll need to add the following configuration in your ionic.config.json file inside the root directory

{
  "name": "mobile",
  "integrations": {},
  "type": "angular",
  "root": "apps/ionic-app"
}

References:

Felix Lemke
  • 6,189
  • 3
  • 40
  • 67