Hi Guys, I’ve literally just started Ionic 3 today and have a question around ionic generate page. When I execute for example ionic g page login.
It creates:
login.html
login.scss
login.ts
login.module.ts
Whilst I know the purpose for login.html, login.scss and login.ts. What is the purpose of login.module.ts? I’m coming from Angular 2 where it does not generate the *.module.ts when creating a new component so a bit confused.
Next question if I want to create a service via ‘ionic generate’ which option do I use?
Final question what is the difference between the component and page option in ionic generate?
Sorry if the questions seem some what straightforward but really appreciate the help on this. Thanks
Since you are pretty much familiar with Angular2, I will try to explain you the use of multiple ngModules with example related to Angular2.
In general, whenever you create a component, pipe, directive or page, you declare it in app.module.ts in Angular2. Ultimately when you build your app, you are bundling the all the pages and their subcomponents into the base main.js file. This increases your bundle size. So, your website is gonna load pretty slow in internet connections with less speed.
Explanation:
Lets say you created an Angular2 website with 10 webpages. After you build your project, lets think your main.js file size is 2.5 MB. Assume you hosted your angular site in www.samplewebsite.com. So, whenever someone hits www.samplewebsite.com in browser and hits enter, the browser should load the whole 2.5MB file to display just the home page of your site.
Use of multiple ngModules:
Lets say you have 1 ngModule per page. So you will be having 10 ngModules where each ngModule has content related to its page alone. Lets say you made use of the Lazy Loading feature properly in your website.
So, when you build you site, the main.js will be equal to the size of (Basic Angular Components + HomePageModule - lets say 500kb) and you will have the remaining contents in form of chunks like 0.main.js, 1.main.js etc. So, those chunks will be loaded only when the user navigates to those pages. Otherwise they wont be loaded into the browser at all. So, it will increase the performance of your website even in poor network connections.
So just like Angular2, use of multiple ngModules with Lazy Loading will decrease the base size of app in Ionic3 and improve the User Experience while using apps developed with Ionic3.
Thanks for clarification. So basically the module.ts means each page generated via ionic generate has lazy loading as default, is that correct?
If that is so in an Ionic 2 application does it really matter if it is lazy loaded on the assumption this will be made into Itune and Android apps where all the pages will be downloaded onto the phone when the app is installed???
Or am I missing something ie does the app still need to be hosted by a front end server???
Generating login page using ‘ionic g page login’ does not mean, that the login module is lazy loaded. ‘ionic generate’ just helps you to create the files and *.module.ts file just helps you to group your components related to a single page using modules. Thus, making ngModules in your app clean and simple.
No, you need not host the app using a front end server. You can just build your app and just upload the generated apk file to the play store etc.
Not that I know of, which is one reason I recommend simply pretending the generators don’t exist. They don’t really add much value IMHO, and it takes me longer to clean up after them than it does to just make the files myself.
So, when you use them in your project, you just install them and then import into AppModule, and add that module (MyDatePickerModule or TranslateModule) in imports section in app.module.ts. Does that mean they are lazy loaded? Definitely No.
Similarly when you create generate pages using generators, you get those *.module.ts files. If you dont want those pages to be lazy loaded, you can just eagerly load them by following the above method(i.e Import that module into AppModule and add it in imports section of AppModule).
Finally what I would like to say is Modules are a easy way to group your components, pipes, directives etc. You can eagerly load them or lazily load them, however you want. But having a *.module.ts files in your project, does not mean you are completely opted-in for lazy loading.
I don’t believe it’s that simple. You also must remove the @IonicPage decorator that the generator makes for you, and once you’ve done that there is no reason for the .module.ts file to exist at all. The generators in their current state generate lazily-loaded pages for both “page” and “component”, and I think that’s confusing and counterintuitive for a feature that is still not considered production-ready.
Really? I would love to have a lazily loaded custom component module. Can you explain how to achieve that with Ionic?
You mentioned that having a .module.ts file in project is equal to opting-in for lazy loading. I explained it need not be necessary by saying that you can have CustomComponentModules like MyDatePickerMoudle, TranslateModule which in turn has file naming structure (.module.ts) and they are eagerly loaded.
In the above lines, I am referring to the ComponentModules. I never said that the custom components are lazy loaded.
Here I am referring to Modules at page level with gets generated with ‘ionic g page login’, not the custom component modules.
Anyway, since you very well know in depth about the Modules and everything in Ionic, it would be great if you can write some blog on In-depth details about modules, what can be done, what cant be done with Modules in Ionic and post those links here, it would be useful for everyone and solves everyones doubts.