Angular 9 Tutorial For Beginners #38 - Lazy Loading Modules

Поділитися
Вставка
  • Опубліковано 5 сер 2024

КОМЕНТАРІ • 101

  • @amanuellebassi7294
    @amanuellebassi7294 3 роки тому +4

    You are a super amazing guy. I am enjoying the ride.

    • @ARCTutorials
      @ARCTutorials  3 роки тому

      Thank you so much 🙏

    • @laytonrowan9172
      @laytonrowan9172 2 роки тому

      i guess im randomly asking but does anyone know a tool to log back into an instagram account?
      I somehow lost the login password. I appreciate any help you can offer me.

    • @donovanavi8608
      @donovanavi8608 2 роки тому

      @Layton Rowan Instablaster ;)

    • @laytonrowan9172
      @laytonrowan9172 2 роки тому

      @Donovan Avi thanks so much for your reply. I got to the site on google and im trying it out atm.
      Seems to take a while so I will get back to you later with my results.

    • @laytonrowan9172
      @laytonrowan9172 2 роки тому

      @Donovan Avi it worked and I actually got access to my account again. I'm so happy:D
      Thank you so much, you saved my ass :D

  • @irivalkaai4414
    @irivalkaai4414 3 роки тому +5

    Such a great video! Your explanation was very clear and extremely helpful, exactly what I was looking for. Thank you so much, I'm definitely saving your channel to check it out later.

    • @ARCTutorials
      @ARCTutorials  3 роки тому +1

      Thank you so much Irina. I have just started Angular 10 series in detail. Pls do check it out. Also if you have any doubts or queries, i am right here to help! Happy learning

  • @thanushr6710
    @thanushr6710 3 роки тому +2

    After wasting 1 whole day. Found this useful video. Thanks a ton man. My angular version is 11 and this worked for me.

    • @ARCTutorials
      @ARCTutorials  3 роки тому +1

      Glad it helped! I am sure you will like the Angular 10 series where I am covering all topics in detail as well the MEAN stack application. Check the below links
      ua-cam.com/video/Fg4spR6cdBQ/v-deo.html
      ua-cam.com/video/RJc9wD02DMU/v-deo.html

  • @mihaivalentin6306
    @mihaivalentin6306 3 роки тому +2

    Thank you sir! This is exactly what i needed.

    • @ARCTutorials
      @ARCTutorials  3 роки тому +1

      Great Mihai. You are most welcome!!

  • @adithya751
    @adithya751 3 роки тому +2

    Crystal 🔮 clear explanation, thank you!

  • @pushkardeshmukh1987
    @pushkardeshmukh1987 3 роки тому +2

    I had used older versions of angular where lazy loading was different ,thank you for such good explanation of same for newer versions.

  • @olujobifolaranmi2133
    @olujobifolaranmi2133 2 роки тому +1

    Thank you so so much for this tutorial, it's very detailed.💯💥

  • @SrikanthVinnamala
    @SrikanthVinnamala Рік тому

    100th comment, thank you for your efforts, wishing you 100% success in your life.

  • @nyaraimatembudze4335
    @nyaraimatembudze4335 4 роки тому +1

    So helpful thank you.

    • @ARCTutorials
      @ARCTutorials  4 роки тому +1

      Thank you so much Nyarai 🙏🙏

  • @kiranpawar2463
    @kiranpawar2463 3 роки тому +1

    very great explanation

  • @jagabandhujena9476
    @jagabandhujena9476 2 роки тому

    Hi sir ,very nice understanding 👍👍

  • @shubhrojyotisengupta7051
    @shubhrojyotisengupta7051 2 роки тому +1

    Why this video is so downrated, He is really working hard and giving us proper knowledge from basic to advanced

  • @CheeJinOng
    @CheeJinOng 3 роки тому +1

    Thanks..well explained

  • @harshitbadaya6978
    @harshitbadaya6978 3 роки тому +1

    Wonderfull explanation, You are great Teacher they way you explain any topic that is super and easy understandable👌

  • @aishwaryabhuskat6812
    @aishwaryabhuskat6812 3 роки тому +1

    Good explanation and example 🤘

    • @ARCTutorials
      @ARCTutorials  3 роки тому

      Hi Aishwarya. Glad you liked it. I also have an complete CRUD tutorial on Angular, which makes use of Lazy Loading. It will be surely interesting for you, please do check it out.
      ua-cam.com/video/I5i1GonlfFM/v-deo.html

  • @darshans9589
    @darshans9589 3 роки тому

    For dividing the modules, suppose we have a main page and some nav bar with (about, FAQs etc) how should one go with this approach ?

  • @gururaj7250
    @gururaj7250 3 роки тому +1

    very good tutorial

    • @ARCTutorials
      @ARCTutorials  3 роки тому

      Thank you so much buddy for your support!

  • @sreenuksr
    @sreenuksr 4 роки тому +3

    Angular 9 Tutorial For Beginners #38 - Lazy Loading Modules
    - By Default, NgModules are eagerly loaded, which means that as soon as the app loads, so do all the NgModules, whether or not they are immediately necessary
    - For large apps with lots of routes, consider lazy loading - a design pattern that loads NgModules are needed
    - Lazy loading helps keep initail bundle sizes smaller, which in turn helps decrease load times
    - New with Angular8, loadChildren expects a function that uses the dynamic import syntax to import your lazy loaded module only when it's needed
    - with lazy loaded modules in angular, it's easy to have features loaded only when the user navigates to their routes for the first time
    - How to implement lazy loading
    - 1. create a feature module , child routes
    - 2. loadChildren: config in the app routing
    - Syntax - ng generate module --route --module app.module
    - It will generate a lazy loaded feature module , you can verify in console (F12), network tab
    - when we navigate to orders module then only orders module will be loaded (lazy loaded feature)
    - you can add your own routes in OrdersRoutingModule (routes array) - orders-routing.module.ts
    { path: 'orders', loadChildren: () => import('./orders/orders.module').then(m => m.OrdersModule) }

    • @ARCTutorials
      @ARCTutorials  4 роки тому +1

      Thanks Srini for capturing the notes. Regards Sridhar

    • @amanuellebassi7294
      @amanuellebassi7294 3 роки тому +1

      Thanks a lot Sreeni for taking your time and editing the notes.

    • @sreenuksr
      @sreenuksr 3 роки тому

      @@amanuellebassi7294 welcome!

    • @vaibhavsharmaiiitu9319
      @vaibhavsharmaiiitu9319 Рік тому

      If you have the complete notes can you share with me

  • @mariyageorge2277
    @mariyageorge2277 3 роки тому +1

    Excellent

  • @infinitywebsolutions5321
    @infinitywebsolutions5321 3 роки тому +1

    thanks for Lazy Loading

  • @saikumarmogilla450
    @saikumarmogilla450 3 роки тому +2

    HI, but in 15:00 we are not getting products and product-view and product-edit unless we enter int he url right, so it is also lazy loading?????

    • @ARCTutorials
      @ARCTutorials  3 роки тому +1

      Yes Sai. You are right. That's because its lazy loading module

    • @saikumarmogilla450
      @saikumarmogilla450 3 роки тому

      @@ARCTutorialsbut here we didn't generate feature module ri8 without generating feature module also, lazy loading is installed, plz tell me how sir

  • @igorr4682
    @igorr4682 2 роки тому

    Can you provide an example where you can lazy load a module that exports a component so it can be used by other components outside of the module. When I implement lazy loading, I'm getting error message that the component that the module is exporting is not recognized by Angular. Thx in advance!

  • @jacksm8709
    @jacksm8709 4 роки тому +2

    i have no regrets having gone thru ur tutorials, i didn't know there was something called lazy loading.. thanks a million,, just clarify something for me.. do u recommend that we create our project components using the lazy loading technique? (I want to covert a whole water utility billing system from vbnet(desktop system) to django+angular due to the virus people r working from home).?

    • @ARCTutorials
      @ARCTutorials  4 роки тому

      You're very welcome! Yes Its best practice to use Lazy Loading design pattern in our applications.

    • @jacksm8709
      @jacksm8709 4 роки тому

      @@ARCTutorials thanks for that, in case one wishes to ask questions/or be assisted how can they get in touch with you directly?

  • @nehalparmar144
    @nehalparmar144 2 роки тому

    Other loading strategy can you explain eager, pre loading ...
    Also, I have checked module file, it contains all the code we have written for components, but this components will be only gets loaded to screen when accessed.. can you explain, how internally all these works.
    Also, what is differential loading introduced after Angular 8/9.

  • @rahulpathak906
    @rahulpathak906 4 роки тому +2

    Hats off for the tut .... you have make it very easy to understand ... Thanks a lot ....... can u share the notes file in link ? please

    • @ARCTutorials
      @ARCTutorials  4 роки тому

      Sure Rahul. I will soon upload the link with notes.

  • @chammu6936
    @chammu6936 4 роки тому +2

    Thank you for all your efforts. Learned a lot. But i need one clarification. Is this command(what you have used to generate a orders module ) is only to generate lazy module ? If i just want to create a module with out any lazy loading concept means then what is the command for that in Angular 9 ? Thanks in advance.

    • @ARCTutorials
      @ARCTutorials  4 роки тому

      Thank you priya!! Happy learning

    • @ARCTutorials
      @ARCTutorials  4 роки тому

      Hi Priya. Can u pls check my latest tutorial Angular CRUD tutorial #5 i have showed both ways of normal module and module with lazy loading. Ur doubts will be cleared

  • @meenalyengul5372
    @meenalyengul5372 3 роки тому +1

    kindly reduce advertising popup coming in between.

    • @ARCTutorials
      @ARCTutorials  3 роки тому

      Hi Meenal. Sure I will try to reduce advertising in between videos!

  • @RahulPatil-db5pp
    @RahulPatil-db5pp 4 роки тому +2

    Thanks, this is nice explained video. I have one question . How do we do lazy loading packages with shared module?
    For e.g. I have below modules
    1. Main App Module
    2. Home Module : which is package
    3. Account Module : another package.
    4. Settings Module : another package
    I understood that module 2,3,4 can be loaded lazily using loadchildren
    But now all the packages have one common package for eg. CommonShared package.
    How can we load this commonShared package with Main App module and not? having separate copy in other 3 packages

    • @ARCTutorials
      @ARCTutorials  4 роки тому +1

      Hi Rahul. Since we are trying to use the module as shared. It will be best if you use it appModule itself. Please try this out and let me know how it goes. Thanks Sridhar

  • @peterkim7788
    @peterkim7788 4 роки тому +1

    Is there any way to convert modules I already made into lazy modules? Do I have to delete them all and make them as lazy modules again through CLI?

    • @ARCTutorials
      @ARCTutorials  4 роки тому +1

      No. Please dont delete. U can convert existing modules into lazy loading modules. I will try and make a quick notes for u. Pls dont delete till then!!!

    • @peterkim7788
      @peterkim7788 4 роки тому +1

      ARC Tutorials thank you so much. And I am little bit confused when I make something as a module OR a component! Confused between both!

    • @ARCTutorials
      @ARCTutorials  4 роки тому +3

      I can understand initially it may be confusing. I can bet once u follow this mini practical project series ur doubts will be cleared. ua-cam.com/play/PLp50dWW_m40WQ9-t0lyamekhE2OiZQrCG.html

    • @peterkim7788
      @peterkim7788 4 роки тому

      ARC Tutorials thank you so much!

  • @vivekrampelly6435
    @vivekrampelly6435 3 роки тому

    sir in the NETWORK section ''orders'' module is behaving like a component it's showing like localhost:4200/orders

  • @themathsprodigy8181
    @themathsprodigy8181 4 роки тому +1

    I am trying to figure out the use-case of Lazy loading. For example amongst the two routes:
    { path: 'search', component: SearchComponent},
    { path: 'orders', loadChildren: () => import('./orders/orders.module').then(m => m.OrdersModule) },
    if we provide localhost:4200/search in the URL it is only loading the search module, similarly which ever module you want to load just give the route for it in the URL provided you have configured the route. in the second line of code when we give URL as localhost:4200/orders then Order module is loaded. what difference does it makes?

    • @ARCTutorials
      @ARCTutorials  4 роки тому

      In practical applications we will have like 30-40 modules. U dont want all to load at all times for all users. Thats when lazy loading is most helpful. It tells when u can load a module and when not! !

    • @ARCTutorials
      @ARCTutorials  4 роки тому

      If u dont make them modules, bith search and orders will load all the time, which is what we avoid by using modules 👍

  • @rajnish1002
    @rajnish1002 3 роки тому +1

    I am trying same code (ng generate module orders --route orders --module app.module) not working for me
    It showing (cannot read property 'Initializer' of undefined)?
    Plz help if possible

    • @ARCTutorials
      @ARCTutorials  3 роки тому

      Hi Rajnish. I have created brand new use cases and examples in Angular 10 series. Do check it out - it will help you ua-cam.com/video/7sUkBbNPJ5k/v-deo.html

  • @TheFunnyGamer007
    @TheFunnyGamer007 3 роки тому +2

    hello sir ,what is the function of this command --module app.module

    • @ARCTutorials
      @ARCTutorials  3 роки тому

      This command is used for creating new modules

  • @kolluruprakash
    @kolluruprakash 4 роки тому +1

    Great explanation sir. I've one doubt, Can't we apply Lazy loading concept on components only on modules only we can apply? And to apply lazy loading concept only with the help of router module or on button click also can we apply lazy load to some particular component? Please, clarify my doubts on this in ASAP before going further advanced concepts sir. Once again so much thankful to you for your clear explanations. :)

    • @ARCTutorials
      @ARCTutorials  4 роки тому +3

      Hi Prakash. In large projects, we map multiple components to a module. By using lazy loading module, we enable components as when they are invoked. Lazy loading is a concept for modules and NOT for components.

    • @kolluruprakash
      @kolluruprakash 4 роки тому +1

      @@ARCTutorials So much thankful to you for your wonderful explanation.

    • @ARCTutorials
      @ARCTutorials  4 роки тому

      You are most welcome

  • @shubhambhatia5668
    @shubhambhatia5668 2 роки тому

    can you explain how forroot and forchild works ?

  • @harshitbadaya6978
    @harshitbadaya6978 3 роки тому

    Hi I have question.
    In my application currently lazy loading is not implemented, so i want to application. Please help me with ur guidance, how can I route bit confused.
    My Application hirerachy
    App
    -home
    - 20+components inside home
    -login
    -Layout
    -Common
    For now routing in on app component.
    So i want to add routing of that 20 components inside home component.
    So my query was do in hve remove the components declaration from appmodule. Ts and declare in homemodules. Ts

  • @SS-yv9iu
    @SS-yv9iu 3 роки тому +1

    Do i need to import lazy module in app.module in import section?

    • @ARCTutorials
      @ARCTutorials  3 роки тому +1

      Only the main module which is lazy loaded if its not already imported.

    • @SS-yv9iu
      @SS-yv9iu 3 роки тому

      @@ARCTutorials thank you

  • @karandeepajmani811
    @karandeepajmani811 3 роки тому +1

    Hi Sir,
    I'm not getting the component name's in network tab. Can you help me with that how can I see the name of component.

    • @ARCTutorials
      @ARCTutorials  3 роки тому

      Please check the route that you created and for lazy loading is the route in AppModule

  • @jimishshah2150
    @jimishshah2150 3 роки тому

    ng generate module customers --route customer --module app.module is not supporting in Angular Version 10
    Its creating CLI errors "Cannot read property 'properties' of undefined"
    Please provide the solution for it...

  • @manishasrivastava8356
    @manishasrivastava8356 3 роки тому +3

    create lazy loading for products only not for its childrens how you'll do that.

    • @ARCTutorials
      @ARCTutorials  3 роки тому +1

      Hi Manisha. Great idea. I will cover it as part of Angular 10 series i am currently creating. Pls do check it that out

    • @manishasrivastava8356
      @manishasrivastava8356 3 роки тому

      @@ARCTutorials kindly create it asap i really need this and if possible then create it by today itself. Thanks

    • @manishasrivastava8356
      @manishasrivastava8356 3 роки тому

      i am using angular version 6 so make sure it will work..

  • @PradeepYadav-zh1ws
    @PradeepYadav-zh1ws 3 роки тому

    how to put an existing component in lazy loading ?

  • @shwetaakole689
    @shwetaakole689 3 роки тому +1

    Please send all notes

  • @kundanchaurasia32
    @kundanchaurasia32 2 роки тому

    Sir please share notes

  • @Bukratusi
    @Bukratusi 3 роки тому +1

    please share the notes text file.

    • @ARCTutorials
      @ARCTutorials  3 роки тому +1

      Hi Hireme. Please send email at soorya.aaradhya@gmail.com

    • @Bukratusi
      @Bukratusi 3 роки тому

      @@ARCTutorials hiremeonly@gmail.com

  • @krishnashauzshenikala9240
    @krishnashauzshenikala9240 2 роки тому

    first module wok second module not work

  • @nasrhussain9061
    @nasrhussain9061 3 роки тому

    10:13

  • @pavankumar4909
    @pavankumar4909 3 роки тому

    Everything is fine but u write a lot