Components/components.module.ts

Ionic Framework ionic-v3
1

Hello,
I have noticed the now ionic cli does not generate anymore a module inside the folder of
the component(but even pipes, providers, etc)
it generates instead another module out of the folder, /components/components.module.ts)
which does not have IonicPageModule.forChild(MynameComponent) in the “import” section.

What did it change? what is it used for? I did not find the proper guide for this.
Plus I noticed that all the further components are inserted in this module.
Does it mean that I will lazy load all the component together even if I need to import just one in a page?

I am a little confused, can someone please shed some light on it?
Thanks!

1 Like
2

I’m also confused about the correct usage and would benefit from some docs.

UPDATE:

The original Lazy Loading Post from Ionic does actually shed some light on this:

Lazy Loading Link from Ionic

Just use IonicModule as the import like so:

//components.module.ts

@NgModule({
	declarations: [
    BackgroundImageTileComponent,
    TileComponent,
    ActionButtonComponent,
    IconButtonComponent
  ],
	imports: [
    IonicModule
  ],
	exports: [
    BackgroundImageTileComponent,
    TileComponent,
    ActionButtonComponent,
    IconButtonComponent
  ]
})

and then use the Component Module in the desired pages like so:

//welcome.module.ts

@NgModule({
  declarations: [
    WelcomePage
  ],
  imports: [
    IonicPageModule.forChild(WelcomePage),
    TranslateModule.forChild(),
    ComponentsModule,
  ],
  exports: [
    WelcomePage
  ]
})
1 Like
3

For what it’s worth, I really dislike this design pattern. It forces all components, regardless of feature, into the same module, which makes no logical sense. It exacerbates the code duplication problems inherent in the current state of Ionic’s lazy loading implementation. IMHO, if one absolutely insists on lazy loading, despite the significant drawbacks when dealing with custom components, each component should have its own module.

1 Like
4

That’s actually what i keep doing, I delete components/components.module.ts and I recreate the proper module inside the proper folder :slight_smile:
As soon as I understand the real benefit for that, I’ll change my ways.

5

There was an official post someplace that I don’t know how to find that said the shared Components folder was created to make things more intuitive to people who had never used Ionic before.

My opinion: If you’re brand new, and creating an app with 2 pages and 2 components, the cli generators make sense. If you have experience, and you’re creating a larger app, the cli generators get in the way. In my perfect world, I could reprogram the cli generators to create folders where I want them. As long as you are creating folders in a conceptually coherent way, I don’t think you’re doing it wrong. But if you haven’t read the official Angular style guide, I recommend you do that. It’s great.

6

My opinion about modules and components is that the best thing to do is to make one module per component (and per page). Here are my thoughts and explanations about such approach, and why I consider this the best design, both in terms of performance as well as maintenance (and considering the way angular loads modules):