[Enhancement] Lazy load components

[jayaike]

Issue: https://github.com/Cloud-CV/EvalAI-ngx/issues/257

I have lazy-loaded all the routing modules. Below are the stats.

Development

Initial EvalAI-ngx Bundle size - 1.26MB (1290.24KB)

Current Bundle Size after optimization - 352KB (0.34MB)

Optimization ------- 72.7%

Production

Initial EvalAI-ngx Bundle size - 1.61MB (1648.64KB)

Current Bundle Size after optimization - 945KB (0.92MB)

Optimization ------- 42.8%

Methodology

Step 1: Feature Modules

I broke up all the components into feature modules in order to import them lazily. I divided them by purpose and route.

Step 2: Import Lazily (Change Routes)

I had to change all the routes to lazily import the feature modules. This way the user only loads the modules he/she uses at the time of need.

Step 3: Change Method of lazy-loading to PreloadAllModules

Basically, what PreloadAllModules does is it waits for the initial component to load then it starts loading other links so as to reduce the loading time when navigating to other routes.

As shown above, this new way of loading modules in EvalAI-ngx will increase the loading time of EvalAI-ngx and also improve User Experience by making the webpage smoother because it does not have all the modules loaded at once.

Although it took a whole night 🤣😂....It was worth it!

@Ram81 @RishabhJain2018 @pushkalkatara @Sanji515 @lunayach @vkartik97 Please let me know your thoughts.

[codecov-io]

Codecov Report

Merging #274 into master will decrease coverage by 0.01%. The diff coverage is 33.33%.

@@            Coverage Diff             @@
##           master     #274      +/-   ##
==========================================
- Coverage   50.66%   50.64%   -0.02%     
==========================================
  Files          66       66              
  Lines        3766     3771       +5     
  Branches      442      444       +2     
==========================================
+ Hits         1908     1910       +2     
- Misses       1763     1766       +3     
  Partials       95       95

Impacted Files	Coverage Δ
...e/challengesettings/challengesettings.component.ts	45.16% <33.33%> (-0.46%)	:arrow_down:

Impacted Files	Coverage Δ
...e/challengesettings/challengesettings.component.ts	45.16% <33.33%> (-0.46%)	:arrow_down:

---

Continue to review full report at Codecov.

Legend - Click here to learn more Δ = absolute <relative> (impact), ø = not affected, ? = missing data Powered by Codecov. Last update 607a297...c0e0742. Read the comment docs.

[Sanji515]

@nsjcorps I'm getting this error, can you please take a look at this?

[jayaike]

I guess this should be the key https://github.com/angular/angular-cli/issues/14566

[jayaike]

It's as a result of the lazy modules. The syntax is correct though. @Sanji515

[jayaike]

Do you use yarn or npm. I use yarn