Possibilities of Transfer an Angular App to Ionic and Capacitor

I have the task to convict an big and complex Angular App into an Ionic App to create Apps for iOS and Android.

The Angular App is an historically grown App, with 300k loc, which is used in many different product.

The Requirements are complex.
The first is, the App must have an Barcode-Scanner to scan a OQ-Code on an external device. In this QR-Code is an SSID and PW of the WIFI from this external Device.
After scanning the Mobil-Phone should change his Wireless Connection to the WIFI of the external Device.

For this I tried:
Barcode-Scanner: https://github.com/capacitor-community/barcode-scanner
WifiWizard2: https://github.com/tripflex/WifiWizard2

Both do not work very well.

The Second is that the external device then provide an WebAPI to control this external device. The connection is https with a self-signed certificate.
It is possible to set the WebApi to http but for historical reason not so easy in the Angular App.

The simple Question is:
Is this a good Idea or is the expense to realize this to high?
Has anyone similiar experience in transfering such big Angular App to Ionic?

Hey there

For clarity’s sake I would split the question in two - move to Ionic UI framework and 2) use capacitorjs to make it an hybrid app.

Maybe point 1 - the UI framework is a steep migration. Especially if the current app is responsive on its own - how does it look like on mobile phone? If that is satisfactory, maybe defer that migration. Then again, if the UI needs a revamp, Ionic UI can be great choice

Point 2 - I’d suggest making a technical proof-of-concept getting the connectivity thing going the way you want it. That seems, by the looks of it, the biggest concern of feasibility. In the end, if the plugins provided for are not working, you option is to write your own plugin in capacitor/cordova. If that is not within your appetite - then things become interesting in terms of priorities - as imho this is the closest option to bridge to native stuff without a full rewrite of the app.

QR code scanners - there are plenty of them. Also web based, so these migth be easy to replace. I have no experience with WIFI managers using QR.

Getting the existing app into a capacitor container should be very easy and something that can be done within a few hours - just syncing the build folder into an android/ios container. See capacitorjs docs - whether it then works for the user - is a matter of testing.

It is possible to set the WebApi to http but for historical reason not so easy in the Angular App.

What do you mean by this? You cannot use HTTP? what other api you have in mind?

1 Like

Hi,

Point 1: The current App is only in some small parts responsive. That is the point I try to make clear to the management, that we need a revamp for this. → So this is much effort to do.

Point 2: I try to make a Proof of Concept for the connectivity but my limits are at Objective-C and Swift and in App Development in general. After some talks with our App Developer and my own research I think we must write our own plugin for this and this is also much effort to do.

And yes it was very easy to get the existing app into capacitor and get a running app, but the backend is on another machine and the connection to this is not easy. If I use the Browser to test, I open a second tab and allow a connection to the backend with the self signed certificate but I cannot do this in the App.

Next thing is Http. I can configure the angular-app to use http via environment and the WebApi is reachable via http with an browser. But the App inside Ionic on an iPhone can not reach it, and I have no clue why.

Maybe use native http? Standard http client for ionic (Angular) - #2 by EinfachHans