Greetings,
I’ve recently been given the task of creating “custom branded” variations of two Ionic apps. Unfortunately due to customer time constraints and my personal limited experience with Angular, I didn’t have time to do this correctly the first time round, so I ended up simply duplicating the project, updating the branding and app identifiers, and building the “new” apps. Now I’d like to try fix these apps properly to avoid relying on copy/paste coding.
Just for context: Each application connects to a proprietary device (the first via BLE, the second via TCP socket) and provides the means to read real time information from and update configuration on the connected device. Furthermore, the interfaces need to be translated into other languages, which I’m currently doing with ngx-translate.
There may be some aspects that are common to all four apps, while some aspects are only for the BLE-comms or only the TCP-comms apps.
I’ve been working through a few different tutorials showing how to create configurable Angular libraries, how to include enough of Ionic to use it’s UI elements in the library’s components, etc… But I’m not seeing a clear path to a solution yet…
Could anyone provide some suggestions on how best to move forward with this?
It would benefit you to create custom components and just import them in the projects. The idea is build once and apply to all. Here are what i believe are the 3 best options for you:
They each have their Pros and Cons, but if your looking for simplicity and not rely on frameworks, go with StencilJS. Goodluck!
Aren’t those custom web components just UI elements?
I have Angular services that I need to share between multiple apps. One handles discovering and connecting to BLE peripherals, the other handles opening and maintaining TCP socket connections. Then of course there are the services with my own apps’ specific handling for the devices they communicate with.
Unless I’m misunderstanding you, it doesn’t seem like those will help me here.
No, it depends on how you build them. You can build the services for each specific component.
For example, you said you need one that handles the discovery/handling of BLE.
So you need to brainstorm on what belongs to this specific feature and create a workflow about this component so you can get a greater understanding Of how it generally works.
Read documentation and look at tutorials of stencilJS. You’ll be surpirsed at what you see.
I’ll definitely do that, thanks for the info.
Quick note: if anybody else has a suggestion, I am also open to other ideas. Specifically considering I’m currently trying to learn more about Angular libraries in general. 
For the sake of clarity, I also just tweaked the thread title to make it clear that I’m trying to share internal business logic specifically.
So, after a great deal of reading, playground projects, and trial and error, none of the three options that @mikrochipkid proposed turned out to be appropriate, tl;dr: I need to share the business logic contained within Angular services specifically, where those three options go into advanced usage areas with creating services in the application in question to share data between components created with them.
As such, I am going to stick with Angular libraries for this task. Fortunately I can add a library project to my application’s workspace and move business logic around quite easily, from which point it’s simple to move the library project to a separate workspace and install it through NPM.
Either way, since this is an Angular-specific issue (i.e.: not directly related to Ionic), I’ll probably have better luck finding the info I need somewhere other than this forum.
1 Like
Yeah, I’ve been down a similar road. Duplicating apps works short-term, but maintaining multiple codebases quickly becomes a headache. Creating shared Angular libraries for the core logic and UI components is definitely the way to go—it’ll save time and keep things scalable.