Lazy loading standalone components | Routing | Angular 15

Summary
Learn about lazy loading with Standalone components in Angular 15, and how to implement it in the app routing.
Highlights
🔧 Lazy loading can be achieved using the Standalone component approach or the modular approach.
🚀 Standalone components, when marked as lazy loaded, will only load on demand.
🛠 Use load component and import statements to achieve lazy loading for Standalone components in the app routing.
💡 Lazy loading is recommended to avoid loading unnecessary components and improve performance.
📚 Lazy loading with the modular approach will be covered in the next video.
Github
github.com/sai...
(Angular Standalone components | Ways of using standalone components | Angular 15 | Stable release)
• Angular Standalone com...
(Angular Routing | Routing Configuration | Angular 15)
• Angular Routing | Rout...
(Angular Standalone components | Ways of using standalone components | Angular 15 | Stable release)
• Angular Standalone com...
(Content Projection in angular | Parent child communication | Angular 14 | Part 9)
• Content Projection in ...
(View child decorator on Angular Components | Child to Parent communication)
• View child decorator o...
(View child decorator on HTML elements)
• View child decorator o...
React in Angular
• React in Angular | Wri...
Angular Life cycle hooks
• Angular life cycle hoo...
Angular ngModel
• Template driven form |...
Angular 14 features
• Angular 14 features | ...
(Reactive Form - 24 | Strictly typed reactive forms | Angular 14 updates)
• Reactive Form - 24 | S...
(Reactive Form - 22 | Address Management System | Part - 6 | Pre-filling addresses of form)
• Reactive Form - 22 | A...
(Reactive Form - 21 | Address Management System | Part - 5 | Validate address form)
• Reactive Form - 21 | A...
(Reactive Form - 20 | Address Management System | Part - 4 | Remove Address from addresses)
• Reactive Form - 20 | A...
(Reactive Form - 19 | Address Management System | Part - 3 | Add Address into addresses)
• Reactive Form - 19 | A...
(Reactive Form - 18 | Address Management System | Part - 2 | Binding Groups and HTML Content)
• Reactive Form - 18 | A...
(Reactive Form - 17 | Address Management System | Part - 1 | Creating UI and form structure)
• Reactive Form - 17 | A...
(Reactive Form - 18 | Address Management System | Part - 2 | Binding Groups and HTML Content)
• Reactive Form - 18 | A...
For understanding ngFor click the below link
• Angular For | Looping ...
For Understanding ng-container, click below link
• Angular Nested loops |...
Form arrays and type casting, click below link
• Reactive Forms Part 14...
Try to understand all my previous concepts in reactive forms series
For Reactive forms complete series, follow the below link
• Angular Reactive forms
For Unit testing on Reactive forms, follow the below playlist
• Playlist
For Unit testing all angular concepts, follow below playlist
• Angular Tutorials
For Unit testing all angular unit testing concepts, follow the below playlist
• Angular Unit Testing
Learn Javascript concepts from the below playlist
• Concepts of JavaScript
#angular15 #lazyloading #angular #angulartutorialforbeginners #angulartutorial

[@honeypilania01]

Nice work keep it up bro and trust me your videos in good place in search...
Keep going 😊

[@techshareskk]

Thank you 🙏 Glad to hear that

[@tanushreebhattacharji2611]

Nice video! Initially I had implemented a module per component, and module based lazy loading in my app. At that time my main.js bundle size was 2mb. Now I converted to all standalone and implemented lazy loading for standalone components. Now my bundle size is 4mb. Any idea what can be the problem or a solution?

[@techshareskk]

I guess you are starting loading component have many dependencies check that. If yes please import and use only required modules or components in App component. That should solve your problem. If still problem exist and if your code is not private or corporate try to push your code into repository and give me that link i can experiment it and can let you know the problem.

[@pottewarbalaji2814]

Nice explaination

[@techshareskk]

👍

[@rajwa1002]

Angular is really improving itself

[@techshareskk]

🤟✌️

[@drax432]

Thanks. What about the route configuration within the lazy loaded component? How should we replace the RouteModule.forChild(routes). Any video for that

[@techshareskk]

Sure will make that soon you can expect in next upcoming videos

[@ishowspeed7191]

thanks

[@techshareskk]

✌️

[@luisfernandodeolazabalsche3317]

Muchas gracias.

[@mithunm7615]

Thanks

[@techshareskk]

Thank you Mithun

[@sachinsharma5662]

laptop consa hai ye bta do bro or computer hai to specs bada hi smooth chal rha hai

[@techshareskk]

Im using Macbook pro laptop bro with 16gb and 1TB configuration.

[@nouchance]

Bro are you using ANGULAR extension (Google Chrome) ?

[@techshareskk]

No not using any angular extension
Just make sure to run your application in development mode
If you are using angular 12+ default angular will point to production mode so make sure to change them accordingly

[@nouchance]

@@techshareskk thanks 👍

[@rushikeshpatil3277]

Can you create video on ngrx

[@techshareskk]

Yeah need to plan on that but due to time constraints not able to more videos Rushikesh Patil

[@rushikeshpatil3277]

@@techshareskk ok but try to plan this video we are eagerly waiting

[@ishowspeed7191]

"message": "Component HostelsComponent is standalone, and cannot be declared in an NgModule. Did you mean to import it instead?",
Bro ee Error vasthundhi bro

[@techshareskk]

You are using HostelsComponent as standalone but you are keeping in some module . Please remove that if it is declared in any of your modules in whole project