CODEWITHSUNDEEP
angularionic3lazy-loading
Dani
Dani

Reputation: 4177

Lazy loading and components

I'm moving my app to lazy loading and I found 2 ways of having components loaded.

One is having X components and just one global components.module (e.g. https://www.9lessons.info/2017/12/ionic-angular-lazy-loading-child-components.html) that we'd need to import on our pages. But what happens if we just want one component?

That's the other way which I saw on some @mhartington's repo. We could have again one .module per component as we have with pages: https://github.com/mhartington/lazyLoad2-components/blob/master/src/components/music-card/music-card.module.ts

Is this second way better than the first one? What's the point of having all component loaded on one page if we're using lazy loading?

Upvotes: 1

Views: 738

Answers (1)

SiddAjmera
SiddAjmera

Reputation: 39432

What I'm writing below is a short excerpt from Angular's Style Guide and will help you decide which your Lazy Loading Strategy.

The basic idea behind Lazy Loading modules in Angular is to load a module only if it's required. The ideal way of implementing it is to create different modules. Now, there would generally be these types of modules in your Angular App:

  1. App/Main/Root Module - This would be the orchestrator of your Angular App. All the modules, required to initially load your Angular App would reside in this module.
  2. Shared Module - This module will contain all the components/pipes/directives etc, that would be used by other modules in your Angular App.
  3. Core Module - This module will contain all the single-use components/pipes/directives/services etc. Also, this modules should be imported only once, and that too, inside your App/Main/Root Module.
  4. Utility Modules - Ideally there should be a module for any specific third-party feature that you're using. This helps to keep the App/Main/Root Module clean. So ideally, if you're using Angular Material for eg, then you should create a module for that that imports all the modules for all the components, that you'd be using in your Angular App, and then export it, from this module, so that any module, that wants to use Angular Material Components, could import it and use it.
  5. Feature Modules - These are the modules that should ideally be lazy loaded. An Angular App should ideally be broken down into logically separated features and each of these modules should comprise of one such logically separated feature. This allows us to then lazy load them.

Keeping all these points in mind, you should break your Angular App down in this way so that it's clear which modules are Feature Modules and can be lazy loaded.

Upvotes: 3

Related Questions