Ionic-framework: Allow IonicModule to be imported multiple times

[jvitor83]

Ionic version: (check one with "x")
[ ] 1.x
[x] 2.x

I'm submitting a ... (check one with "x")
[ ] bug report
[x] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
If i use the Angular 2 router instead of Ionic 2 and try to import a Module with ionic components (and of course importing IonicModule) it not work because of: "Error: BrowserModule has already been loaded. If you need access to common directives such as NgIf and NgFor from a lazy loaded module, import CommonModule instead".

Expected behavior:
Not give error when importing at AppModule a second module that has importing IonicModule.
Allow to import IonicModule at multiples Modules (not only the root).

Steps to reproduce:
Create a sidemenu ionic2 project and create another angular2 module which import the IonicModule. Then try to import that module and use the angular router to navigate to some component inside this module.
or
Clone this https://github.com/jvitor83/angular-seed-cli-admin/tree/ionic-integration ionic-integration branch has the issue. My DashboardModule has IonicModule imported (to make it find the ion components) but gets the error informed. Changing the IonicModule from BrowserModule to CommonModule _(and including the BrowserModule at the AppModule)_ solve the problem.

Related code:
This commit has the change who make this work:
https://github.com/jvitor83/ionic/commit/9ea21b0fad16e95b16deb48ab0fd67dda8affa62
Changing from BrowserModule for CommonModule allow to import into multiple modules.
Alternative scenario where using angular router and lazy loading modules.

What i am asking is to the core ionic team to stop the IonicModule from importing the BrowserModule and use the CommonModule instead, since it has no impact and allow reuse.

[mhartington]

If i use the Angular 2 router instead

The Angular 2 router is not compatible with Ionic 2 and cannot/should not be used.

use the CommonModule instead

We can look into this

[jvitor83]

@mhartington i know that Angular 2 router is not compatible, but what i am trying to achieve is to use a normal angular 2 project (at this point generated by the CLI) but with the ionic 2 components/theme to get the adaptive look.

Anyway, just changing to the CommonModule will be amazing!

[jvitor83]

Without this, i think we can't even create an ionic2 component, put it in a module and publish to npm to allow others to use, because if the module has IonicModule, it will give the same error.

[Dutchboy]

Looks like the same issue as https://github.com/driftyco/ionic/issues/8102

[jvitor83]

@Dutchboy, i don't think it's the same issue!
My trouble is to use IonicModule importing at others angular modules!
Lazy loading can benefit from this, but it isn't my primary purpose!

I am starting a seed that uses ionic2 _(if want to take a look https://angular-ionic-seed.azurewebsites.net/)_, but the above error prevents me from use the ionic module the way it is.

I have to modify the IonicModule to not use the BrowserModule (changing to the CommonModule instead) and everything works.
I'm really waiting for this issue to be solved.

[Dutchboy]

@jvitor83 .... It is the same issue. It guides you exactly how to accomplish what you want to do.

[jvitor83]

@danbucholtz i have read your post at https://github.com/driftyco/ionic/issues/8102#issuecomment-276705837
And i really see that this feature (Lazy Loading) is a bigger one to be accomplished and particullary don't have any hope to be solved soon!
What i think can partially solve some of the problems is to fix this issue (specifically the bug that make impossible to import some module with IonicModule).
This couldn't allow lazy-loading, but will allow anyone to reuse modules (which maybe is what most ppl want)!
Anyway, i don't want to be rude! It's just a humble request!

[danbucholtz]

This is already implemented on our lazy loading experimental branch.

https://github.com/driftyco/ionic/tree/lazy-component

Coming soon.

Thanks,
Dan

[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.