Routing and Lazy Loading with Standalone Components
Вставка
- Опубліковано 27 лип 2024
- 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 UA-cam 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 UA-cam content: / @deborah_kurata
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
#angular #bestpractices #angulartutorial #angularstandalonecomponents #standalonecomponents #demo #lazyloading #lazyloadinginangular #angularlazyloading #routinginangular #routingangular #angularrouting - Наука та технологія
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.
That is wonderful to hear! Glad it's been useful. 😊
Thanks for this video ... I think this is the best explanation of Standalone Components with Lazy loading ... :)
That is kind of you to say! Thank you!
This is probably the cleanest explanation about Standalone Components I've ever seen. You've saved my time lots of time, thank you! 😇
So glad to hear it was useful. Thank you!
Me too - thanks :) Now it's soo easy :)))
i watch your videos on pluralsight seeing you provide free videos on youtube warms my heart.
😊😊
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 😃
Glad it helped!
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.
One of the best tutorilals I found on youtube !!!
Thank you so much! It's great to hear it was useful!
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.
That is kind of you to say. Thank you!
Is there a particular feature you'd like to see more information about?
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.
Thank you so much! 😊
Deborah, you're a gem! Thanks for always delivering quality videos ❤
Wow, thank you! Glad they are useful!
Lol perfect timing! I'm currently migrating our App to standalone right now 😁
Best of luck! Let me know how it goes.
Nice video! Please, keep them coming 😊
Thank you! Will do!
Nice explanation! Your teaching skills are excellent
So glad to hear it was useful! Thank you! 😊
You are awesome Debora.. Thank you so much...
That is very kind of you to say. Thank you!
Thank you so musch ! Love this channel.
Great to hear. Thank you!
I love you for your teaching
😊 Thank you very much!
Muchas gracias!!!! thank you for the lesson
Thank you for watching!
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..
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!
Buen video! Gracias
Thank you so much!
Thank you for watching!
very thank you
Thank you for watching!
Thank soo much!
You are welcome! Thank you for watching!
Like before watch
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.
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!
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.
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.
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.
@@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!
nice
Thanks
Thank you for your great explanation Deborah.
Do you recommend proceeding with full standalone components without using any modules for new projects?
Thank you for the kind words.
Yes, the community is moving toward full standalone components.
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?
Thank you so much just i have question can i use path with loadComponent in app.router.ts instead of main.ts
Thank you for watching!
And if I understand your question correctly ... yes!
I have recently learned that, loadChildren does not need .then() if the PRODUCT_ROUTES are exported default! (I was wondering why not!!!)
Yes! I opted not to cover that thinking most Angular developers weren't familiar with "default exports". But maybe I should have?
@@deborah_kurata it makes for such clean code. Worth a mention at some point,
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('....'),
}
];
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.