Routing and Lazy Loading with Standalone Components

Ғылым және технология

Now that we can build an application using standalone components, we don't need Angular modules (also called NgModules).
But then ... where do we put our routes?
Let's look at how to do routing, including lazy loading, without an NgModule.
To create an application without NgModules, we add the list of routes to the bootstrapApplication configuration. In the providers array, we specify provideRouter and pass in our routes.
To lazy load a set of child routes, use loadChildren.
To lazy load an individual component, use loadComponent.
Links
Simplify with Angular Standalone Components: • Simplify with Angular ...
Migrating to Standalone Components with Angular CLI: • Migrate to Standalone ...
Sample code: github.com/DeborahK/Angular-G...
Content
00:00 Routing + Lazy Loading with Standalone Components
00:20 Routing with NgModules (App module)
00:58 Routing to child routes with NgModules (feature modules)
01:16 Running to see the routes
01:53 Migrating components to standalone
02:09 Routing without NgModules
03:03 Child Routes without NgModules: provideRouter
04:04 Child Routes without NgModules: product.route.ts
05:27 Lazy loading child routes without NgModules: loadChildren
07:51 Lazy loading standalone components without NgModules: loadComponent
10:03 Removing Feature NgModules
10:34 Wrap Up
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
😊About Me
Hey! I'm Deborah Kurata
I'm a software developer and KZread content creator. I speak at conferences such as VS Live and ng-conf. I write articles for freeCodeCamp. And I'm a Pluralsight author with courses in the top 10 most popular (out of 10,000+) over the past 5 years. For my work in support of software developers, I've been recognized with the Microsoft Most Valuable Professional (MVP) award, and I'm a Google Developer Expert (GDE).
Contact me on Twitter: / deborahkurata
Find my Pluralsight courses: www.pluralsight.com/profile/a...
Access my freeCodeCamp articles: www.freecodecamp.org/news/aut...
View my KZread content: / @deborah_kurata
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
#angular #bestpractices #angulartutorial #angularstandalonecomponents #standalonecomponents #demo #lazyloading #lazyloadinginangular #angularlazyloading #routinginangular #routingangular #angularrouting

Пікірлер: 62

  • @jaimemartin1932
    @jaimemartin193217 күн бұрын

    I learned Angular thanks to you in Pluralsight, and now I love Angular, just because the good explanations you provide and how easy to understand is.

  • @deborah_kurata

    @deborah_kurata

    17 күн бұрын

    That is wonderful to hear! Glad it's been useful. 😊

  • @ankitmvp
    @ankitmvp5 күн бұрын

    Thanks for this video ... I think this is the best explanation of Standalone Components with Lazy loading ... :)

  • @deborah_kurata

    @deborah_kurata

    2 күн бұрын

    That is kind of you to say! Thank you!

  • @user-bm1rv8pf2k
    @user-bm1rv8pf2k10 ай бұрын

    This is probably the cleanest explanation about Standalone Components I've ever seen. You've saved my time lots of time, thank you! 😇

  • @deborah_kurata

    @deborah_kurata

    9 ай бұрын

    So glad to hear it was useful. Thank you!

  • @Alupl

    @Alupl

    5 ай бұрын

    Me too - thanks :) Now it's soo easy :)))

  • @Eaglessoft
    @Eaglessoft6 ай бұрын

    i watch your videos on pluralsight seeing you provide free videos on youtube warms my heart.

  • @deborah_kurata

    @deborah_kurata

    6 ай бұрын

    😊😊

  • @danielabonvini
    @danielabonvini3 ай бұрын

    I'm using for the first time a standalone component in my application and didn't know how to handle its routing; thankfully your video came up in the search results! As always your videos are amazing and full of real world examples. Already saved the other standalone related videos in my watch later list 😃

  • @deborah_kurata

    @deborah_kurata

    3 ай бұрын

    Glad it helped!

  • @simenesky
    @simenesky5 ай бұрын

    One of the best tutorilals I found on youtube !!!

  • @deborah_kurata

    @deborah_kurata

    5 ай бұрын

    Thank you so much! It's great to hear it was useful!

  • @alfyxxxxx
    @alfyxxxxx4 ай бұрын

    Been looking for a while to implement more than one, or multiple, router-outlet in Angular 17 with all the standalone new stuff. This video was all I needed, appreciate the effort and explanation. Straightforward. You just gained a subscriber.

  • @michaelgolden4370
    @michaelgolden43709 ай бұрын

    Deborah, you're a gem! Thanks for always delivering quality videos ❤

  • @deborah_kurata

    @deborah_kurata

    9 ай бұрын

    Wow, thank you! Glad they are useful!

  • @barcioch_
    @barcioch_8 ай бұрын

    I've been looking for this for a few days now. I'm glad I found your channel, Deborah. That's what I call quality conent.

  • @deborah_kurata

    @deborah_kurata

    7 ай бұрын

    Thank you so much! 😊

  • @sidneyshuman6738
    @sidneyshuman6738 Жыл бұрын

    Lol perfect timing! I'm currently migrating our App to standalone right now 😁

  • @deborah_kurata

    @deborah_kurata

    Жыл бұрын

    Best of luck! Let me know how it goes.

  • @ErickCcsVzla
    @ErickCcsVzla Жыл бұрын

    Nice video! Please, keep them coming 😊

  • @deborah_kurata

    @deborah_kurata

    Жыл бұрын

    Thank you! Will do!

  • @sakarsr
    @sakarsr Жыл бұрын

    Very clean explanation of routing and lazy loading with standalone components. Thank you and good health. please make more videos on angular 16 new features.

  • @deborah_kurata

    @deborah_kurata

    Жыл бұрын

    That is kind of you to say. Thank you! Is there a particular feature you'd like to see more information about?

  • @sukruozdemir70
    @sukruozdemir705 ай бұрын

    You are awesome Debora.. Thank you so much...

  • @deborah_kurata

    @deborah_kurata

    5 ай бұрын

    That is very kind of you to say. Thank you!

  • @ansumanmishra9608
    @ansumanmishra960811 ай бұрын

    Nice explanation! Your teaching skills are excellent

  • @deborah_kurata

    @deborah_kurata

    11 ай бұрын

    So glad to hear it was useful! Thank you! 😊

  • @demidovmaxim1008
    @demidovmaxim10088 ай бұрын

    Thank you so musch ! Love this channel.

  • @deborah_kurata

    @deborah_kurata

    8 ай бұрын

    Great to hear. Thank you!

  • @rajumechanicalhub5805
    @rajumechanicalhub58054 ай бұрын

    I love you for your teaching

  • @deborah_kurata

    @deborah_kurata

    4 ай бұрын

    😊 Thank you very much!

  • @nayosx
    @nayosx2 ай бұрын

    Muchas gracias!!!! thank you for the lesson

  • @deborah_kurata

    @deborah_kurata

    2 ай бұрын

    Thank you for watching!

  • @keycuevasmelgarejo
    @keycuevasmelgarejo11 ай бұрын

    Buen video! Gracias

  • @andersonrueda1580
    @andersonrueda15804 ай бұрын

    Thank you so much!

  • @deborah_kurata

    @deborah_kurata

    4 ай бұрын

    Thank you for watching!

  • @jyothsnareddy9689
    @jyothsnareddy96896 ай бұрын

    The best trainer I have ever known! Your way of teaching has inspired me to learn html , css which iIwas afraid of from 13 years! I have started working on a project from scratch . And I'm using Angular 17. Could you please guide on that..

  • @deborah_kurata

    @deborah_kurata

    6 ай бұрын

    Wow! Thank you! I have courses on HTML, CSS, Bootstrap, JavaScript, and Git/GitHub here on YT. Let me know if you need any of the links. My Angular courses are on Pluralsight: www.pluralsight.com/profile/author/deborah-kurata I do have quite a few Angular videos here on YT, but I don't have an Angular course here as of now. All the best!

  • @MultiWarrr
    @MultiWarrr Жыл бұрын

    Like before watch

  • @digitaldaridesatv1545
    @digitaldaridesatv1545 Жыл бұрын

    Thank soo much!

  • @deborah_kurata

    @deborah_kurata

    Жыл бұрын

    You are welcome! Thank you for watching!

  • @mean2035
    @mean20354 ай бұрын

    very thank you

  • @deborah_kurata

    @deborah_kurata

    3 ай бұрын

    Thank you for watching!

  • @baduy101
    @baduy1019 ай бұрын

    Hey Deborah, Glad that we can now see your contents here in YT. Very informative contents as always. Btw, what are your thought to standalone all the component? Just a bit confuse on when to use standalone component vs adding it in module. Thanks!

  • @deborah_kurata

    @deborah_kurata

    9 ай бұрын

    Thank you! I've been doing 100% standalone recently. And I just heard that Angular v17 (due out next month) will default to standalone. So I think the move is to standalone, unless you have a complex use case that does require an NgModule.

  • @user-di1yd4zu4e
    @user-di1yd4zu4e4 ай бұрын

    This is a great explanation for standard child routes, however, what about nested routes? How can you accomplish this with standalone components? Named router outlets result in 'routes not found' errors. There doesn't seem to be a way to accomplish this currently.

  • @dshakya
    @dshakya6 күн бұрын

    This has been helpful. Trying to find that other video about bootstraping but couldn't find it in the channel. Would you mind linking it in description or info card? Thanks.

  • @deborah_kurata

    @deborah_kurata

    6 күн бұрын

    Glad to hear it was helpful! I believe both videos I referred to are links in the description already. The one about bootstrapping for standalone components is called "Simplify with Angular Standalone Components". Let me know if you were looking for something else.

  • @dshakya

    @dshakya

    5 күн бұрын

    @@deborah_kurata Thanks for that. I did watch the informative video. I suppose I was looking for moving the providers into its own file. I created a new project using latest CLI and basically created the new structure with app.config.ts, where I moved the providers. I then referenced this in main.ts bootstrapApplication like the CLI generated. Much appreciated. Thank you!

  • @gorkemridvan
    @gorkemridvan4 ай бұрын

    Thank you for your great explanation Deborah. Do you recommend proceeding with full standalone components without using any modules for new projects?

  • @deborah_kurata

    @deborah_kurata

    4 ай бұрын

    Thank you for the kind words. Yes, the community is moving toward full standalone components.

  • @madsxcva
    @madsxcva4 ай бұрын

    nice

  • @deborah_kurata

    @deborah_kurata

    3 ай бұрын

    Thanks

  • @tanushreebhattacharji2611
    @tanushreebhattacharji26113 ай бұрын

    Awesome video. I had a question.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?

  • @ahmedrashad494
    @ahmedrashad494 Жыл бұрын

    Thank you so much just i have question can i use path with loadComponent in app.router.ts instead of main.ts

  • @deborah_kurata

    @deborah_kurata

    Жыл бұрын

    Thank you for watching! And if I understand your question correctly ... yes!

  • @hemangthanki
    @hemangthanki Жыл бұрын

    I have recently learned that, loadChildren does not need .then() if the PRODUCT_ROUTES are exported default! (I was wondering why not!!!)

  • @deborah_kurata

    @deborah_kurata

    Жыл бұрын

    Yes! I opted not to cover that thinking most Angular developers weren't familiar with "default exports". But maybe I should have?

  • @toxaq

    @toxaq

    8 ай бұрын

    @@deborah_kurata it makes for such clean code. Worth a mention at some point,

  • @havefun5519
    @havefun5519 Жыл бұрын

    Thanks for the tutorial. BTW, I have a question: If we lazyload the product routes, I understood that when we go to the products list page, it will load My question is, should I lazyload ProductDetailComponent ? Then when we go to the product list page, it will load the lazyChildren, then ProductListComponent will load Then when we go to one product detail page, it won't load first via lazyChildren by default --------------app routes export const routes: Routes = [ .... path: 'products', loadChildren: () => import('./products/product.routes').then(r => r.PRODUCT_ROUTES) }, ..... ]; --------------product routes export const PRODUCT_ROUTES: Routes = [ { path: '', component: ProductListComponent }, { path: ':id', canActivate: [ProductDetailGuard], loadComponent: () => import('....'), } ];

  • @deborah_kurata

    @deborah_kurata

    Жыл бұрын

    Thank you for watching. Sorry for the delay in getting back to you. I wanted time to try this out, but haven't yet. I would *think* that would make sense if the 80% case is that the user will only access the product list and not access the product detail. If the 80% case is that the user will access the list to then access the detail, it may not improve the overall experience.

Келесі