I have an existing Angular project I would like to add Ionic/Capacitor to.
Is there a standard way of doing this or any resources to follow?
Ionic: Ionic Packages - Ionic Documentation
Capacitor: Capacitor - build cross platform apps with the web
I guess I should expand.
I want to turn my Angular app into an Ionic/capacitor app that I can run on ios and android and serve using ionic serve.
The same as if I created a new Ionic project.
These instructions do not provide that capability.
Maybe I will just try making a new Ionic app and copy in all my Angular components.
“For adding Ionic to an already existing Angular project, use the Angular CLI’s ng add feature.”
$ ng add @ionic/angular
Sounds like what you described
I think that slash is a bit thicker than you seem to.
“Ionic” to me, at this point in time, is best thought of as a component library. I think of Capacitor as a successor to PhoneGap and Cordova.
So turning an existing Angular app into an Ionic app and turning an existing app into a Capacitor app strikes me as two radically different things. You very well may wish to do both, or you may wish to do only one, but I definitely wouldn’t necessarily think of them as a package.
Capacitor is great. I don’t want to throw shade on it at all. That being said, if you don’t absolutely need it, I would consider PWA an option with considerably less friction involved at many points in the development process:
- you can run and debug in a desktop browser with automatic recompilation and reloading
- no need to rely on app stores with all their associated baggage for distribution
- truly a single codebase, so testing has fewer platform-specific edge cases to worry about
Given that you seem to already have an Angular app, the only reasons I would want to get Capacitor involved would be:
- I want to distribute via app stores for marketing reasons
- I want to add previously nonexistent functionality that needs something on the native side of the bridge
For Ionic, the question is whether I (or my userbase) prefers Ionic’s implementation of various UI widgets to whatever else we have currently. That would, in addition to the ng add that @EinfachHans is suggesting, require selectively swapping out various existing <wekas-thingy> components for <ion-thingy> replacements.
That could still be done regardless of the decision to get Capacitor involved or not.
2 Likes
It needs to be distributed via the app stores. (I’m a fan of PWA’s but this is not my project).
I only need some of ionic UI components really.
I tried the instructions @EinfachHans suggested but it is not as simple as that.
I am aware of most of the options e.g. Capacitor only but what I am after is explicit instructions on how to do this.
I could probably sit down and figure it out but I am trying to see how much work it is in advance as previously I have always created an Ionic project.
How so? Looks to me like it’s at least intended to be as simple as that. ng add support was added in late 2018, and looking at the stuff in angular/src/schematics, it looks it contains imports for all the twiddly bits needed to support using Ionic components.
Now, that’s for Ionic. Capacitor has a totally separate onboarding procedure that’s basically npm i stuff && npx cap init, which spawns an interactive (ick, but whatever) process to fill out the rest.
You are right, I just needed to invest more time.
I spent more than 5 mins on it and I got it working on Android just using capacitor.
I will have a play with adding in some Ionic components next.
Thanks for the response.
Almost a year ago I managed to port a full webapp I made in react to a functioning PWA and it only took me a couple of days. Added a couple of features that would be mobile specific and some changes between the web-app and PWA and published to Google Play store. Haven’t tried with Angular, but I would assume it wouldn’t be any different, HTML, javascript and CSS are the same and you can consider ionic as a sort of wrapper.
Good luck!
As a professional, I totally agree with what you said.