Scribd
Upload
58 views

Ionic Angular Multi App Project

This document discusses building an Ionic multi-app project with a shared Angular library. It describes creating an Angular CLI workspace without an app, then generating two Ionic apps within it. A shared Angular library is also generated and imported into the apps. Configuring the workspace allows running and building each app individually while sharing common code and components.

Uploaded by

bussard
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
58 views

Ionic Angular Multi App Project

This document discusses building an Ionic multi-app project with a shared Angular library. It describes creating an Angular CLI workspace without an app, then generating two Ionic apps within it. A shared Angular library is also generated and imported into the apps. Configuring the workspace allows running and building each app individually while sharing common code and components.

Uploaded by

bussard
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 14

You have 2 free member-only stories left this month.

Sign up for Medium and get an extra one

Building an Ionic Multi App


Project with Shared Angular
Library
Simon Grimm Follow
Sep 3, 2019 · 7 min read
AngularInDepth is moving away from Medium. More
recent articles are hosted on the new platform
inDepth.dev. Thanks for being part of indepth movement!

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 you have all the
projects in one workspace.

Today is your lucky day as we will do exactly that: Combine the


Angular CLI with the Ionic setup for a multi app project and
additionally create a shared library that can be used from all of
the apps — and everything in one repository!
Angular In Depth
Make sure you have the Angular CLI installed as we need some
The place where
of thoseAngular
advanced commands as well.
concepts are
explained

Creating
Follow 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
72
CLI for which we can also add a flag to not create any
application.
1 This will create just a re barebones project with
some files, so start with that:

1 # Create a workspace
2 ng new devdacticMulti --createApplication=false
3 cd ./devdacticMulti
4
5 # Create our projects directory
6 mkdir projects

Because Angular creates new projects and libraries in the


projects/ folder we will follow that structure for our endeavour
as well. The result for now looks like the image below.

To prepare the workspace for our Ionic apps, go ahead 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 simply select one of
them to run by passing a flag. Make sure that you navigate
your command line into the projects folder for the next
commands as otherwise the apps would be in the wrong place.
Now you have a projects folder with 2 Ionic projects, a good
start so far. If you were to follow the official guide, it wouldn’t
work yet 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 name of our projects.

In order to fix this you need to open both files, here’s an


example of the projects/appOne/angular.json file and the
replacements:

I removed a bunch of lines, in general there are 2 places in the


beginning where you need to replace “app” by “appOne” (or
the name of your project), and then you can search & replace
“app:” and replace that with “appOne:” which should be
another 12 occurrences in the whole file.

Same procedure for the second project that we added, but I


think you know how to do it now. And of course for all other
Ionic apps that you add to that workspace again!

A final look at the root ionic.config.json shows that the apps


were added:

Now the Ionic CLI can find and build the right project, so all
you have to do to run one of your apps is call the standard serve
command and add the --project flag with the name of the
project you want to run!

ionic serve --project appOne

Easy as that, 2 Ionic apps in one workspace, both can be served


within the same directory.

Enabling Cordova Integration in Ionic Apps


Because the browser preview is not everything, let’s add
Cordova to the projects. If you want to see Capacitor as well,
just let me know!

The beginning looks promising again, we simply use the flag


again but then:

ionic cordova platform add ios --project=appOne

...
...

[OK] Integration cordova added!

[ERROR] Could not find cordova integration in the


appOne project.

It ends with a failure, and at this point you can’t build your
Cordova app in the multi app project. The problem is that the
ionic.config.json file (currently) adds the integrations key to
the top-level object, and somehow not to the respective
problem.

To fix the problem, open the ionic.config.json and copy the


block that was added to the bottom of the file into the
according information of the project where you want to add
Cordova:

Now you can try to run your command once again:

ionic cordova build ios --project=appOne

You will see that it now works, and the platforms/ folder is
created inside the projects directory!
This also means you can simply have the according resources
like icon and splashcreen in each of the projects and they don’t
override each other. No additional magic or copy task needed
to configure your client project!

Building a Shared Angular Library


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

To do this, you can now go ahead and create an Angular


library right within that project as well!

ng generate library academyLib --prefix=academy

ng build academyLib --watch

Running the commands will create a new library in your


projects folder, and you should always give a prefix to your
library in order to know where which components come from,
just like all the -ion components.

You always have to run the build command at least once for the
library, but if you are working on it, it makes sense to simply
watch 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 watch and Ionic serve in 2
terminals — I love it when stuff works easy as that!
The standard lib comes with a few files, and it’s enough for
testing.

More on building a library with some additional configuration in


another post maybe?

Right now you can’t use the library in the Ionic projects as they
don’t really know about it, and the import path would be
wrong or not work at all.

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

We have simply added the path to our shared library in here,


just like they were already added to the tsconfig.json at the
root of the project.

Now we can easily go ahead and use that library in our appOne
project, so open the
projects/appOne/src/app/home/home.module.ts and add
it like this:

Note that you should use 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/home/home.page.html:

Now you can make changes to the lib while running watch and
Ionic serve, and you get a sense of why this approach can be
really powerful!

Feeling Fancy?
If you don’t enjoy how Ionic looks as a website, perhaps you
want a standard Angular website? No problemo!

We are anyways in an Angular environment, so you could now


go ahead with the Angular CLI and generate a new application
and then serve it like this:

Now you would have an Angular application right next to your


Ionic apps, living happy and friendly in the same project!

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

The shared library we used could also be another project, and


we could share and use it through NPM as well — if you want
to see more about building your custom Ionic library and how
to use it, just let me know and I’ll share everything you need to
know about it!
You can also find a video version of this article below.

Originally published at https://devdactic.com on September 3,


2019.

JavaScript Ionic Angular Mobile App Development


Learn more. Make Medium Share your
Medium is an open platform yours. thinking.
where 170 million readers Follow the writers, If you have a story to tell,
come to find insightful and publications, and topics that knowledge to share, or a
dynamic thinking. Here, matter to you, and you’ll see perspective to offer —
expert and undiscovered them on your homepage welcome home. It’s easy
voices alike dive into the and in your inbox. Explore and free to post your
heart of any topic and bring thinking on any topic. Write
new ideas to the surface. on Medium
Learn more

About Help Legal

You might also like