Ionic-framework: Ionic 2 and NgModule

[pdrosos]

Hi @jgw96, @brandyscarney, @danbucholtz,

I have a question about Ionic 2 in combination with Angular 2 modules. Now, when Ionic 2 uses Angular 2 final, it's theoretically possible to build modular application architecture.

My question is, will modular application architecture work in Ionic 2 in the same way it works in Angular 2 and is there something else in addition to keep in mind? Some Ionic specific issues, limitations, etc.?

Angular has updated style guide which includes modules and recommendations how to use them (app root module, core module, shared module, feature modules etc.). There are also some considerations to keep in mind, like where to put shared services between modules and where to put shared components/directives/pipes, so they work properly with lazy loaded modules and dependency injection.
Is this all the same for Ionic 2 project, with the same things to keep in mind?

Thanks in advance for your time!

[danbucholtz]

Hi @pdrosos,

Right now our recommendation is to stick with one NgModule unless there is a good reason not to. Lazy loading is something we're considering and it may be something that happens down the road.

For now, your best bet is probably going to be keeping it simple. At least keep it simple to start, get something running, then figuring out optimizations later in my opinion.

I'm going to close this, but I will keep my eye on it and answer any questions. If you want it re-opened, we can do that too.

Thanks,
Dan

[bkapo]

I tried to refactoring my app following angular 2 style guides using core/shared/features modules imported in app.module....
no luck!!

[pdrosos]

I will try refactoring a simple Ionic app with Angular modules during the weekend and will post here how it goes.
Except the Angular styleguide, these two pages from the Angular documentation are a must read:
https://angular.io/docs/ts/latest/guide/ngmodule.html
https://angular.io/docs/ts/latest/cookbook/ngmodule-faq.html

@danbucholtz I see here, that soon Ionic will support the Angular router: https://forum.ionicframework.com/t/new-angular2-router-support-in-ionic2/56847/14
This is great news for developing progressive web applications. Will it work with lazy loading too, how the angular router can work? If yes, then Angular modules must be used too.

I also wonder, if а mobile application only is developed, is it still recommended to use the Ionic NavController instead of the routing?

[Substractive]

Is it still recommended using single ngModule in ionic app? I can't make it work with custom modules.. Any info would be great about this problem.

[danbucholtz]

@Substractive, for now, yes. This may change in the next few weeks as I am beginning to investigate code splitting.

Thanks,
Dan

[Substractive]

I managed to create custom module and export it in app module .. Managed to "route" to page from custom module component that I exported . Haven't tested anything else but routing and building the app. I will be building simple app in near future and will try to experiment with modules more into depth. Anyone tried experimenting with modules and has some info about it?
And yeah Merry Christmas :)

[pdrosos]

I have a root app module, feature modules, core module and shared module, as recommended in the Angular styleguilde. Everything works well so far and I don't have issues. I use the Ionic navigation to navigate trough pages.

[Substractive]

Yeah so am I using ionic navigation.. and yeah I have app module and custom module for "login" which then I assume in same analogy can have it's module and then in app module it should be accessible through the login right? Could you send snippet that I can compare approaches? I will put mine on git in week or 2 :)

[pdrosos]

@Substractive for which part exactly do you need an example, in some module navigating to page from other module or something else?
If yes, it's absolutely the same as if they are in the same module, import the page you need and use this.navController.push(OtherModulePage);

[Substractive]

@pdrosos example of your structure how did you share modules and services if possible, I will start snooping around for best practice structure and encapsulating app code. I feel that this conversation is not so much related to this issue so I won't ask too many questions from now on about examples..
After all I also managed to import module into app module and navigate to that page from my custom module so far I haven't encountered any problems doing that..

[pdrosos]

@Substractive my structure follows the Angular styleguide - I have App root module, Core module, Shared module and feature modules. In Core module are common services. In Shared module are common components, directives and pipes. You can read here and here about details, recommendations and best practices. Exact modules depend on the project. Hope this helps.

[shawnlan]

I can achieve this, but In core/shared/feature modules I have to import IonicModule (AppModule still imports IonicModule.forRoot). Is it the right way? Couldn't find any example or docs that shows importing just IonicModule. Any negative effects?

And can we use Angular Router with Ionic now? Couldn't find anything from docs.

[danbucholtz]

@shawnlan,

You can use the Angular Router but there isn't a lot of benefit right now. You'd probably have to create your own NgModule instance from the Ionic data.

Ionic v3 will support lazy loading via the DeepLinking system. So you'll have proper URLs as a first class citizen, and then be able to use NgModules all over the place for child/shared modules.

All without any significant breaking changes 🎉

Thanks,
Dan

[shawnlan]

@danbucholtz,

Multiple modules are recommended by Angular Style Guide. Is that also the direction Ionic is going in future releases (instead of single module approach)? If that's the case, I would probably like to structure my app into multiple modules now so that I don't have to restructure later.

Right now is it a good idea to import IonicModule in my feature modules? (without it I can't use Ionic components from other modules)

In app.module.ts, I have:

imports: [
    IonicModule.forRoot(MyApp)
]

In other feature modules, I have just:

imports: [
    IonicModule
]

Thanks!

[danbucholtz]

You can't import multiple IonicModules right now because we import BrowserModule. It will break things. We are changing this in Ionic 3 in a few weeks so you'll be able to have feature modules.

Thanks,
Dan

[shawnlan]

@danbucholtz Interesting. I did it but nothing breaks. Works fine still.

[danbucholtz]

Ahh, I guess you aren't using the forRoot method, that could have something to do with it. I'm not sure. Are you able to use Ionic directives, etc in your templates?

Thanks,
Dan

[shawnlan]

No, I use forRoot only in app.module.ts. In other modules I import just IonicModule. Then I can use Ionic components in other modules just fine.

[ryanemax]

waiting for Ionic 3 to optimize structure.

[shawnlan]

@danbucholtz I wonder why lazy loading doesn't work with Angular Router + Ionic at this moment. I tested latest Angular CLI. Lazy loading works fine. Webpack generates chunk files if code contains lazy loading syntax (loadChildren).

Since Ionic uses Webpack as well, I don't see a reason why lazy loading doesn't work with Angular Router + Ionic.

Does it have something to do with Ionic CLI?

[danbucholtz]

I don't think there is any technical reason you couldn't use the Angular router. If you use the IonicModule.forRoot method, you'll have an exception because of multiple BrowserModules being imported.

Thanks,
Dan

[hitpopdimestop]

Hello, everyone!

Just got a task at my job that can be solved using modularity, but as I understood, right now it isn't fully supported and/or documented. Am I right? If not - is there any example app to see how it can be done? And what is the best path - to start creating modules right now or to wait for the Ionic 3?

Thanks,
Dmytro

[shawnlan]

@hitpopdimestop You can import IonicModule.forRoot in the root module, and import IonicModule in other modules (except lazy loaded ones). You can then structure your code following Angular Style Guide.

Ionic V3 will have better support for modularity. You might need to change a few things then, but overall structures should stay the same.

This is not officially documented, but it works for me. Do it at your own risk.

[jvitor83]

@shawnlan you could use Ionic Components inside a Lazy Module using this approach you showed?

At my tests:

• if you don't put IonicModule in Lazy Loaded Modules, you can't use Ionic Components
• and if you put IonicModule in Lazy Loaded Modules, it throw "_BrowserModule has already been loaded_".

[shawnlan]

No, you have to wait for Ionic V3 for lazy modules, unless your lazy module doesn't use any Ionic components (no need to import IonicModule).

[nfantone]

@danbucholtz So now that Ionic 3 has been released... what's the official way to achieve this? How do I use Ionic directives in templates from a feature module?

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.