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

There is not a lot of documentation around the topic of Ionic Multi app projects, but it can be a powerful way to create a white label solution for your clients when yous have all the projects in one workspace.

Today is your lucky day as we will practice exactly that: Combine the Athwart CLI with the Ionic setup for a multi app projection and additionally create a shared library that tin can be used from all of the apps – and everything in one repository!

Brand sure y'all have the Angular CLI installed as we need some of those commands also.

Creating a Multi App Project Workspace

We could start with an Ionic app and remove some of the files, but it's actually easier to create a workspace with the Angular CLI for which we can also add together a flag to non create any application. This volition create just a re barebones projection with some files, and so start with that:

# Create a workspace ng new devdacticMulti -- createApplication = simulated cd . / devdacticMulti # Create our projects directory mkdir projects

Because Angular creates new projects and libraries in the projects/ folder we will follow that structure for our effort as well. The consequence for now looks similar the image beneath.

To prepare the workspace for our Ionic apps, go alee and create a file at the root of the project called ionic.config.json (which is normally automatically in Ionic projects) and simply fill it with:

Now all the Ionic apps that we generate will be added to the projects key of that file, and we can alter merely select i of them to run by passing a flag. Make sure that y'all navigate your command line into the projects folder for the side by side commands as otherwise the apps would be in the wrong place.

cd . / projects # Create our Ionic Apps ionic start appOne blank ionic start appTwo tabs

Now you take a projects binder with 2 Ionic projects, a good offset and so far. If you were to follow the official guide, information technology wouldn't work notwithstanding as the projects would not be found.

The reason is that the automatically generated angular.json file contains a generic app keyword, and we have to change it to match the proper noun of our projects.

In order to fix this you need to open both files, here's an instance of the projects/appOne/angular.json file and the replacements:

ane 2 3 4 v 6 7 eight 9 10 xi 12 xiii 14 fifteen 16 17 eighteen 19 20 21 22 23 24 25 26 27 28 29 thirty 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52

{ "$schema" : "./node_modules/@angular-devkit/core/src/workspace/workspace-schema.json" , "version" : 1 , "defaultProject" : "appOne" , "newProjectRoot" : "projects" , "projects" : { "appOne" : { "root" : "" , "sourceRoot" : "src" , "projectType" : "application" , "prefix" : "app" , "schematics" : { } , "architect" : { "serve" : { "builder" : "@angular-devkit/build-angular:dev-server" , "options" : { "browserTarget" : "appOne:build" } , "configurations" : { "production" : { "browserTarget" : "appOne:build:production" } } } , "ionic-cordova-build" : { "builder" : "@ionic/angular-toolkit:cordova-build" , "options" : { "browserTarget" : "appOne:build" } , "configurations" : { "production" : { "browserTarget" : "appOne:build:product" } } } , "ionic-cordova-serve" : { "builder" : "@ionic/angular-toolkit:cordova-serve" , "options" : { "cordovaBuildTarget" : "appOne:ionic-cordova-build" , "devServerTarget" : "appOne:serve" } , "configurations" : { "production" : { "cordovaBuildTarget" : "appOne:ionic-cordova-build:production" , "devServerTarget" : "appOne:serve:production" } } } } } } }

I removed a bunch of lines, in full general at that place are ii places in the beginning where you demand to replace "app" by "appOne" (or the proper name of your project), and so you can search & supersede "app:" and supplant that with "appOne:" which should be another 12 occurrences in the whole file.

Same process for the second project that we added, just I think you know how to exercise it now. And of form for all other Ionic apps that you lot add to that workspace once more!

A concluding look at the root ionic.config.json shows that the apps were added:

{ "projects" : { "appOne" : { "name" : "appOne" , "integrations" : { } , "type" : "angular" , "root" : "projects/appOne" } , "appTwo" : { "name" : "app" , "integrations" : { } , "blazon" : "angular" , "root" : "projects/appTwo" } } }

Now the Ionic CLI can find and build the right project, so all you have to do to run i of your apps is call the standard serve control and add together the --project flag with the proper noun of the project you want to run!

ionic serve -- project appOne

Piece of cake as that, 2 Ionic apps in one workspace, both can be served within the same directory.

Enabling Cordova Integration in Ionic Apps

Considering the browser preview is non everything, let'south add Cordova to the projects. If y'all desire to see Capacitor every bit well, just let me know!

The get-go looks promising again, we just employ the flag over again merely so:

ionic cordova platform add ios -- project = appOne . . . . . . [ OK ] Integration cordova added ! [ Mistake ] Could not find cordova integration in the appOne projection .

It ends with a failure, and at this signal you tin't build your Cordova app in the multi app projection. The trouble is that the ionic.config.json file (currently) adds the integrations key to the superlative-level object, and somehow non to the respective trouble.

To set the problem, open the ionic.config.json and copy the cake that was added to the bottom of the file into the according data of the projection where y'all want to add Cordova:

one 2 3 iv five six 7 viii nine 10 eleven 12 13 14 15 16 17 18 xix 20 21

{ "projects" : { "appOne" : { "name" : "appOne" , "integrations" : { "cordova" : { } } , "type" : "angular" , "root" : "projects/appOne" } , "appTwo" : { "name" : "app" , "integrations" : { } , "type" : "angular" , "root" : "projects/appTwo" } } , "integrations" : { "cordova" : { } } }

Now you can try to run your control once once more:

ionic cordova build ios -- project = appOne

You will see that it at present works, and the platforms/ binder is created inside the projects directory!

This too means you lot can simply have the co-ordinate resources like icon and splashcreen in each of the projects and they don't override each other. No additional magic or re-create task needed to configure your client project!

Edifice a Shared Angular Library

Right now it's a repository with ii separate Ionic apps, but they don't share any logic or components.

To exercise this, yous can now go ahead and create an Angular library correct inside that project as well!

ng generate library academyLib -- prefix = academy ng build academyLib -- scout

Running the commands volition create a new library in your projects binder, and you lot should always requite a prefix to your library in order to know where which components come up from, just similar all the -ion components.

Y'all ever have to run the build command at least one time for the library, only if you are working on it, it makes sense to simply sentinel all changes and it will rebuild immediately on safe.

Actually, the Ionic project will then rebuild itself as well afterwards if you run both the scout and Ionic serve in 2 terminals – I love it when stuff works easy as that!

The standard lib comes with a few files, and information technology'south enough for testing.

More than on building a library with some boosted configuration in some other post maybe?

Right now you can't use the library in the Ionic projects as they don't really know most information technology, and the import path would be wrong or non piece of work at all.

To fix this new trouble, you can open the projects Typescript config, for example the projects/appOne/tsconfig.json and change it to:

ane 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 xviii nineteen xx 21 22 23 24 25 26 27 28 29 thirty

{ "compileOnSave" : imitation , "compilerOptions" : { "baseUrl" : "./" , "outDir" : "./dist/out-tsc" , "sourceMap" : true , "declaration" : false , "module" : "esnext" , "moduleResolution" : "node" , "emitDecoratorMetadata" : truthful , "experimentalDecorators" : true , "importHelpers" : truthful , "target" : "es2015" , "typeRoots" : [ "node_modules/@types" ] , "lib" : [ "es2018" , "dom" ] , "paths" : { "academy-lib" : [ "../../dist/university-lib" ] , "academy-lib/*" : [ "../../dist/academy-lib/*" ] } } }

We have just added the path to our shared library in hither, just like they were already added to the tsconfig.json at the root of the project.

At present we tin can easily go alee and apply that library in our appOne project, and then open the projects/appOne/src/app/domicile/home.module.ts and add together it like this:

1 two 3 4 v 6 7 viii nine 10 xi 12 thirteen 14 xv 16 17 18 19 xx 21 22 23 24 25

import { NgModule } from '@athwart/cadre' ; import { CommonModule } from '@angular/common' ; import { IonicModule } from '@ionic/athwart' ; import { FormsModule } from '@angular/forms' ; import { RouterModule } from '@angular/router' ; import { HomePage } from './home.page' ; import { AcademyLibModule } from 'university-lib' ; @ NgModule ( { imports : [ CommonModule , FormsModule , IonicModule , RouterModule . forChild ( [ { path : '' , component : HomePage } ] ) , AcademyLibModule ] , declarations : [ HomePage ] } ) export class HomePageModule { }

Note that yous should utilise the name academy-lib without any path, which your IDE might want to tell you. If you added the TS config before correctly, this works now!

To finally see it in action, simply use the default component of the lib in the projects/appOne/src/app/dwelling/dwelling house.page.html:

< ion - header > < ion - toolbar > < ion - championship > Ionic App 1 < / ion - championship > < / ion - toolbar > < / ion - header > < ion - content > < academy - academyLib > < / academy - academyLib > < / ion - content >

Now you can brand changes to the lib while running watch and Ionic serve, and y'all become a sense of why this approach tin be really powerful!

Feeling Fancy?

If you don't enjoy how Ionic looks as a website, perchance you desire a standard Angular website? No problemo!

We are anyways in an Angular environment, so you could now go ahead with the Athwart CLI and generate a new awarding and and so serve information technology similar this:

ng generate awarding academyWeb -- routing -- way scss ng serve -- open -- projection = academyWeb

Now you would have an Angular application right next to your Ionic apps, living happy and friendly in the same projection!

Determination

There'southward not a lot of information on the topic of Ionic multi app projects, but they can be actually powerful if you can make them work for your white characterization solution or perhaps simply for having the Ionic app and website in one project.

The shared library we used could besides be another project, and nosotros could share and utilise it through NPM every bit well – if you want to see more nigh building your custom Ionic library and how to use it, just let me know and I'll share everything you need to know most it!

You can also find a video version of this commodity below.

mortimertragivan.blogspot.com

Source: https://devdactic.com/ionic-multi-app-shared-library/

Share this post