Need guidance with Ionic 4

#1

Hello guys, I’m new to this forum and the Ionic community. I need to learn Ionic for professional reasons and I was wondering if I could get some guidance on this forum.

I’ve read the documentation on how to install Ionic, etc. I’m a bit confused with the information found there. For example, I used the Ionic CLI to generate a new app, this command ionic start myApp blank, then the documentation says that to run the app I need to run this ionic serve, however when I check the package.json, the script looks different, so I have to use this command instead "start": "ng serve"

It looks like an Angular app, why is this?

#2

Hello,
if you have created an app with type=angular, then it is an angular based app. Ionic 4 is framework agnostic, it is now more an ui framework with some tooling. If you use angular, then it is an angular app or vue or react or pure or…

Best regards, anna-liebt

#3

How can I use Ionic with React?? I’m a React developer and that would be extremely useful for me, I’m not very familiar with Angular.

Also, is React supported with Ionic?

#4

Hello,
okay you caught me, react isn’t really well supported,
but…


…tada

Best regards, anna-liebt

#5

Umm it makes me wonder, I don’t see anything related to React in the official Ionic docs, that makes me doubt. I know for a fact that Ionic is built on Angular, they say that clearly.

#6

@ionic/react is only in alpha right now 0.0.4.
So it’s coming

Ionic readme.md

#7

Hello,
ionic 3 is based on angular. Ionic 4 is framework agnostic ( thats what they say), the components are build with stencil and they are web components.

So vue or react are not offical supported as far as I know, but maybe one day. I can not say really something to usabilliuty with react, vue etc, because I use angular.

Best regards, anna-liebt

#8

That is very good to know, where can I follow these updates? I’d like to know when it’ll be possible to use React Ionic in production.

#9

Sign for the newsletter, join the Slack Channel would be great ways to stay informed. Ionic underwent a full rewrite to use web components so it could support other frameworks. :slight_smile:

#10

Going off of that, I’d like to know if I can make http requests in Ionic using the Angular http module, because it feels a lot like an Angular app.

Also, do I need to install Cordova in Ionic 4?

#11

hello,
if you use type=angular, then you can use any angular related stuff.

If you wanna create web content, then build it like ionic build --prod --release and use the generated content inside www folder.

If you wanna create a pwa, then an easy way is installing angulars pwa service workers, build it and use the generated content in www folder.

If you wanna run it on device, then you can use cordova or capacitor and with there native plugins you get access to native features on device. Follow there instructions to build for android, ios, w10mobile, browser. Take a look to there requirements.

If you wanna build for desktop, you can use pwa or add electron.

If you need best native speed, support, etc, then code native, not js/ts.

Best regards, anna-liebt

#12

I want to build an app for iOS and Android, I read the Ionic docs and I didn’t see that I have to use Cordova, what is this for? I’ve seen it before. I’m using Ionic 4 BTW.

If I use type=angular I still can develop apps for iOS and Android correct? And by using type=angular I would be able to use Angular http module?

I apologize for all these questions, I’m a React developer and with Angular it seems like there are just way to many ways to do the same thing and that it’s just confusing… Same can be said about Ionic, it’s surprising that I don’t find the details that you mentioned in the docs…

#13

Cordova is user for native device plugins (Camera, geolocation)

You build you app using --type=angular --cordova, and import the httpclient module into your main app module.

Angular Httpclient docs

You can use the build and run CLI commands to to transpile to iOS or Android.

I see that react is always more popular but I’ve been satisfied with my angular experience and Ionic as well

#14

I know how to use Angular http module, I wanted to know if I can use it out of the box with Ionic. If I didn’t add --type=angular when I first ran my command ionic start myApp to create my Ionic app, is there any way I can do it now?

Also if I add the --type=angular flag, am I still developing mobile apps for iOS and Android?

Thanks for the Cordova thing clarification, everyone talks about it but I couldn’t find anywhere the reason why I should Cordova. So basically if I want to have access to the camera (and other native things) I will need to install Cordova. What is the command, assuming I already initiated my app with ionic start myApp

#15

Ionic is built on angular so all you have to do is use http module like normal. --type=angular just specifies an ionic 4 project. --type=ionic-angular builds a type 2/3 project. And then manually add the the http module to your project like standard angular

Cordova can be added to the project with --cordova at the end of the start command
When you add Cordova you are adding a config.xml file that is used in building iOS and android projects. You install you selected platform and then building and run

Ionic Cordova platform command

Ionic Cordova build command

Ionic Cordova run command

#16

I ranionic start myApp command, my package.json says I’m using ionic version 4: "@ionic/angular": "^4.0.0"

So If understand correctly, with this I can use Angular http module out of the box?, I guess I will try it and see if it works.

As I said, I didn’t add --cordova flag when I created my project, is there a way I can install Cordova now, if so, what would be the command?

Again, apologies for the noob questions, I just want to make sure I’m in the right path, thanks a lot for the help.

#17

Http module definitely works, just need to implement it as usual
ill have to get back to you on the adding cordova, still looking into it

1 Like
#18

Hello,
ionic 3 is based on angular.
Ionic 4 is framework agnostic, ionic 4 components are build with stencil as web components.
To use ionic 4 with angular, you use --type=angular as described in the docs. https://ionicframework.com/docs/cli/commands/start
With --type=angular you can use ANY angular related stuff out of the box. Ionic 4 is more a ui framework with some tooling. ionic cli is calling for angular stuff the angular cli.

If you need later native stuff, then you can install cordova or capacitor.

Best regards, anna-liebt

#19

I have another question, I know that Ionic offers some buitl-in cross-platform UI components out of the box, like buttons, inputs, etc., if I decide to built these components myself with HTML and CSS (because the app need to be personalized), are they going to be cross-platform as well?

Do I have to necessary use Ionic built-in components??

#20

The ionic components just provide a native looking bootstrap to the UI elements without having to do any heavy lifting, styling-wise. HTML5 elements are ok to use if you need though