How to Build a Native App from Angular Projects with Capacitor

[@galaxies_dev]

Want to learn more about building native apps with web technology? That's awesome! Check out my new platform galaxies.dev/ for practical courses & more tutorials 🚀

[@Guminator05]

I'm working on a similar case where I need a website and an ios / android application at the same time. I've been working with Ionic for a long time, but I would never believe how easy it can be with a capacitor as opposed to a cordova. Thank you for all your tutorials and videos. They are really helpful.

[@galaxies_dev]

Thanks Daniel and I completely agree!

[@TheSaceone]

I hope this will bring more and more developers to Ionic and to the Simonics community!!

[@galaxies_dev]

Yeah Angular + Capacitor might indeed have a broader audience!

[@zahidshaikh3122]

This is Mind Blowing!

[@iang9675]

Wow this comes in clutch. I was just looking to learn this exact thing! (Angular + Capacitor) Where should I go to find a tutorial on using the the Capacitor File System for iOS and Android? I’m looking to save JSON data from an API to the native local storage.

[@galaxies_dev]

Maybe check out this one: kzbin.info/www/bejne/jX_XlmdmbKalh5I&ab_channel=SimonGrimm

[@passivedividendsoptions]

About to give this a try, thanks for the video!!

[@RadomirMazonPl]

That is exactly what I needed :) Thx.

[@galaxies_dev]

Glad it helped!

[@prasadnarayana7257]

Love your content like anything 😍

[@christopher5731]

very informative thank you for posting this

[@galaxies_dev]

Glad it was helpful!

[@lucascorrea9695]

Great video, really helpful, thanks :)

[@galaxies_dev]

Glad you enjoyed it!

[@jvoirin]

Great video!! 👍👍

[@galaxies_dev]

Thank you!

[@JeremyAlpha]

This is exactly what I need thank you very much.

[@galaxies_dev]

Glad I could help!

[@chandrasekharasharmat3032]

Awesome, as usual! Thanks Simon.

[@galaxies_dev]

My pleasure!

[@aabuabara]

Hello, many thanks for the vídeo. I have a question: by default, when I run npx cap open ios, the app language is in English (Xcode configuration). How can I remove the english language and select only Spanish language? In Xcode is unable to remove English language.

[@mukul13197]

My frontend loads on android studio, but ive tried and failed numerous times trying to get the androud emulator loaded fronted app connect to my local express server. How do we inspect network traffic ? How to consume restFul APIs of an angular converter android app ?

[@wiliam334]

Amazing ta. Can u make a video about piblishing the app to the stores pls

[@weixiangng8279]

How do you export or deploy the angular native app to playstore or ios play store?

[@joypernites6339]

Hello! May I know if using real time object detection is possible using capacitor?

[@garyyaral]

Hello!! How can I remove the button that opens gallery and only allows me to take one photo?

[@anton98ilmilanista]

Hello, I have an issue. When I follow these steps and the app is created on an Android device, on devices running Android 10 and below, the app opens, the Capacitor logo appears for a few seconds, and then instead of the view, nothing is displayed. However, on devices running Android 11 and above, everything works correctly. I don't understand why. I've tried on multiple PCs, and the issue remains the same.

[@ProjectAryawarta]

In my angular project I am using payment gateway and replaceing url while payment. Also my backend using CORS filter. Will this work?

[@galaxies_dev]

Can't exactly predict, but for CORS you might just have to include another origin!

[@samarthmali3541]

I have an angular application Which have Authorization authentication functionality but When I kill Application on Android my access token get cleared but same working fine for web

[@raulangeljimenezhernandez3342]

This is really great! I just needed to adapt the web aplicacion to a android device. I just have one question, is it possible to trigger custom actions for the back click? Lets say for example in one screen I click back but I dont want the usually history(-1) I want to return the user to a diferent page. Is this posible? I was trying to add the noHistory on the android manifest but got to result.

[@galaxies_dev]

Yes you can use the @capacitor/app package where you can add a listener to the backButton: capacitorjs.com/docs/apis/app#addlistenerbackbutton-

[@rkkhadka1]

I get build failure after integrating ionic if I want to use ionic command to build/run. e.g if I run ionic cap run ios/android. Did you encounter this?

[@galaxies_dev]

No haven't seen that, what exactly is the issue?

[@egarabini]

Thanks Simon!

[@galaxies_dev]

You are welcome Eduardo!

[@RajeevKumar-st5hr]

How can select range fron center to left or center to right without using dual knob?

[@aqueelalam4148]

my aplication run on emulater .but after installon android phone not data fatch from server.? Please help me. !

[@JuanChehin]

Hello, I made an application with Angular that I then export to android via capacitor, the problem is that when I want to start a session, I click on "start session" but it does not send the request to the back end. The application in Angular does send it and check the IP and it is correct, any solution?

[@sarathkumar-ud4go]

hi, Im working on ios/android app using ionic 5 angular. is there any info how to use card io plugin (scan credit card option). can you post a video on that? thanks

[@ALex-ts1gu]

Is there a way to create an iOS app without using a Mac? I want to convert my Angular app and Windows to an iOS app? Thanks a lot.

[@galaxies_dev]

There are cloud services, but usually you at least need to generate a certificate on a Mac and need it once.

[@shubhifromyoutube9546]

hi, Simon & all the channel visitors, do we have any solution for the circular progress bar in ionic? if yes, please provide the URL for the same. I am really searching for it for a last long. I implemented ng-circle-progress but it does not work well

[@galaxies_dev]

You can use the progress bar or the loading, but I guess those won't cover exactly your needs :/

[@pallelaharish7647]

Hai Simon this video is very useful for me . But i have a error in my application . Css not working in Android app what can I do now Help me plzzz.

[@galaxies_dev]

You can use remote debugging and check what's wrong!

[@prateekbhardwaj9943]

what about performance? and lags? will it runs smoothly like flutter and other apps

[@galaxies_dev]

Capacitor apps run at 60fps as well if you follow best practices of web dev.

[@tikka6554]

Can i install capacitor and angular to sublime text

[@realisticanims9032]

is not related.. but is possible to upload a video to firebase and play it an ionic app? i appreciate any help on how to do it

[@galaxies_dev]

Upload is definitely possible to Firebase storage! For playing I'm not sure if Firebase supports streaming the video or if you would first have to download the movie and then play it from your FS, but in general it should work :)

[@LexMadafaka]

No where to find how to set up a "Run/Debug Configuration". My "Module:" dropdown/select is always empty, I can not select anything, and no matter what combination I check in, it will be incorrect according to Anroid studio. I have no idea what to do.

[@prasadnarayana7257]

Can we do same process for ngrx store project? My company uses it for handle multiple applications at single code base. Can we have a short videos on it extension to this video

[@galaxies_dev]

Sorry but haven't used ngrx yet :/

[@jamikhabir492]

I ran the command: "npx cap open ios" and it only took me to a folder "xcshareddata".

[@alanbique2548]

interesting.. nice infoss

[@prasadnarayana7257]

Can't we use ionic cli commands usually I use ionic cap run android

[@MoonMists]

Nice video. Great work! What solution would you use to make an Angular app look like a native window application? So what's the best way to get rid of the HTML look and make it look like a normal windows application. Any tips? PS: For your info: We are a group of students that have made a backend in C# (Entity Framework) with a frontend in Angular. We are able to create an installer file for easy install of the application on Windows, but we are looking for a good way to hide the html lay-out)

[@galaxies_dev]

I'd probably just use Tailwind and create a unique UI with that!

[@apinkavada1251]

amazing !!!!

[@galaxies_dev]

Thank you! Cheers!

[@prasadnarayana7257]

May I know why ionic 3, why can't latest ionic 5 or 4 ? 3 is way older

[@galaxies_dev]

I'm not sure what you mean, I don't think I used Ionic 3 in here. And yes, I would always recommend the latest Ionic version!

[@abdelhamidtahiri9462]

How convert an app created with anguar and spring boot to android with capacitor

[@galaxies_dev]

Sorry haven't worked with Spring boot for a long time :/

[@abdelhamidtahiri9462]

@@galaxies_dev when i convert the angular app to android , how i connect it to api

[@anujghadge4444]

@@abdelhamidtahiri9462 Same Question, i have successfully converted the App, but cant seem to access the backend/Apis which are written in nodeJS

[@yacinedrissi8811]

Thé best as well

[@erickreyes4485]

HI @simon i know that u are a pro, i need your help, try to get geolocation when app are in the next states, closed, background and open

[@HamzaAhmed-yz6sn]

did you find any solution for this i am also looking for something to get location in background

[@cirkulyaciya]

Please make vue capacitor video

[@malikhandev]

1st and i need this video

[@prateekbhardwaj9943]

now days everyone is asking website/ecommerce with its app! need to learn mobile development also i think..

[@galaxies_dev]

It's that easy :)

[@christophermorgan8938]

You are a legend for doing these vids. I had used the previous video you did on how to use angular's multiple applications feature with ionic. kzbin.info/www/bejne/o52mlZl3q9OsbNE. I made the changes to the angular.json file. app to appOne and other recomendations. For some reason when running android it was looking for a capacitor.config.json file. I had to convert the ts file to json. Then I had an issue with ionic capacitor run android --project=appOne (NOTE: using capacitor not cordova) and it said android already exists. Basically, I am feeling a bit lost as to whether multiple projects does work using capacitor (or even cordova). Then I saw this video of yours and I was like sweet, but, the commands you use are directly interacting with capacitor and not ionic (and obviously not with the fixes for multiple apps). I just wondered if there was reasoning behind this as multiple apps and capacitor opens a can of worms not worth bothering with? Obviously, you don't have time to do every video based on every update and best practices. Just wanted to know if multiple apps will work with capacitor when running android and whether I should use ionic commands or or capacitor commands. ( I am not an expert so please forgive me if the answers are obvious I just need a green light to persist, Lol )

[@galaxies_dev]

Hey Christopher, I'm really not an expert on having multiple apps in one project so I can't really say whether the stuff will work :/ But Ionic is basically "only" the UI of your components, Capacitor is the tool to build your app. So most likely you should interact with Capacitor!

[@christophermorgan8938]

@@galaxies_dev thanks mate. That definitely helps. Going through your vids has given me a good insight. Now I just have to bash away at it.

[@yunus5949]

Is that really Native app? :)

[@galaxies_dev]

Sure, I can bring it to the app store and it's just like any other native app on a smartphone!

[@carlitros4494]

Fake

[@galaxies_dev]

?

[@TheBestDieEarly]

Is it possible, to load a ready android app project in Angular (e.g. Visual Code Studio) and rebuilding the same app for iOS?

[@galaxies_dev]

You can deploy an Angular app to iOS and Android, but you can't easily convert a native Android app to iOS if you mean that!

[@TheBestDieEarly]

@@galaxies_dev Correct, that's exactly what I mean. In your video I saw that in the dev tool within the Angular project the "Android module" has the same project structure as that in Android studio. My idea was to open (or copy) an existing native Android app project within the Angular project and then create an iOS version from it. But you think that probably won't work. Is something like this technically possible?