https://github.com/nbaua/nglazyloadedcomponent
Angular 10 Lazy Loaded Components Demo
https://github.com/nbaua/nglazyloadedcomponent
angular javascript lazy-components typescript
Last synced: 2 months ago
JSON representation
Angular 10 Lazy Loaded Components Demo
- Host: GitHub
- URL: https://github.com/nbaua/nglazyloadedcomponent
- Owner: nbaua
- Created: 2020-09-02T12:39:20.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2020-09-02T13:07:01.000Z (about 5 years ago)
- Last Synced: 2025-01-14T18:43:13.762Z (9 months ago)
- Topics: angular, javascript, lazy-components, typescript
- Language: JavaScript
- Homepage: https://github.com/nbaua/NgLazyLoadedComponent
- Size: 561 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Angular Lazy `Components`
### This example shows how components are Lazy loaded or on-demand.
- Pros :
- Improves application loading time.
- Resources are not eagerly loaded results in saved server bandwidth.
- Cons :
- Components do not work in same fashion as lazy loaded modules.
- Module injections and data sharing between two components need component references to be used.
## TIP
Do not reference the component in the App Module as otherwise they will be eagerly loaded.
> Use the following command to generate the component
```
ng g c lazy-component --flat --skip-import --skip-selector --skipTests
```
> To use the modules in the lazy components, need to create a module class, as under.
```
@NgModule({
declarations: [LazyComponent],
imports: [CommonModule],
})
class LazyComponentModule {}
```
`Note that, this module is not exported. As this is self consumed. For now this is the hack to be used. Hopefully Ivy team resolves this issue soon.`
### Some Action
`Initial State`
`Lazy Loaded Component 1`
`Lazy Loaded Component 2`
