Angular-Lazy-loading | How to implement lazy loading | Command Line Interface library
kandi X-RAY | Angular-Lazy-loading Summary
kandi X-RAY | Angular-Lazy-loading Summary
How to implement lazy loading in angular
Support
Quality
Security
License
Reuse
Top functions reviewed by kandi - BETA
Currently covering the most popular Java, JavaScript and Python libraries. See a Sample of Angular-Lazy-loading
Angular-Lazy-loading Key Features
Angular-Lazy-loading Examples and Code Snippets
Community Discussions
Trending Discussions on Angular-Lazy-loading
QUESTION
I have a main application and on the click of a menu, I am loading a new lazy-loaded submodule(productModule). I want to have multiple routes there on the productModule but it is not working. Can anyone help? I have tried cannot find module in angular Lazy Loading and lazy load module inside main component in Angular 10 and many more.
Here is the code
...ANSWER
Answered 2020-Nov-02 at 06:07Consider below,
You are lazy loading the ProductModule
when the user visits /product
. Therefore the user has to visit /products
for the child routes to be activated
All child routes for the /product
routes must have /product/path/to/route
. For your case this will be /product/productdetail/1
To solve this you will have to change your router link to reflect this
QUESTION
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?
...ANSWER
Answered 2018-Aug-26 at 16:27What 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:
- 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.
- Shared Module - This module will contain all the components/pipes/directives etc, that would be used by other modules in your Angular App.
- 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.
- 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.
- 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.
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
Vulnerabilities
No vulnerabilities reported
Install Angular-Lazy-loading
Support
Reuse Trending Solutions
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
Find more librariesStay Updated
Subscribe to our newsletter for trending solutions and developer bootcamps
Share this Page