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
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
17 күн бұрын
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 ... :)
@deborah_kurata
2 күн бұрын
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! 😇
@deborah_kurata
9 ай бұрын
So glad to hear it was useful. Thank you!
@Alupl
5 ай бұрын
Me too - thanks :) Now it's soo easy :)))
i watch your videos on pluralsight seeing you provide free videos on youtube warms my heart.
@deborah_kurata
6 ай бұрын
😊😊
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
3 ай бұрын
Glad it helped!
One of the best tutorilals I found on youtube !!!
@deborah_kurata
5 ай бұрын
Thank you so much! It's great to hear it was useful!
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.
Deborah, you're a gem! Thanks for always delivering quality videos ❤
@deborah_kurata
9 ай бұрын
Wow, thank you! Glad they are useful!
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
7 ай бұрын
Thank you so much! 😊
Lol perfect timing! I'm currently migrating our App to standalone right now 😁
@deborah_kurata
Жыл бұрын
Best of luck! Let me know how it goes.
Nice video! Please, keep them coming 😊
@deborah_kurata
Жыл бұрын
Thank you! Will do!
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
Жыл бұрын
That is kind of you to say. Thank you! Is there a particular feature you'd like to see more information about?
You are awesome Debora.. Thank you so much...
@deborah_kurata
5 ай бұрын
That is very kind of you to say. Thank you!
Nice explanation! Your teaching skills are excellent
@deborah_kurata
11 ай бұрын
So glad to hear it was useful! Thank you! 😊
Thank you so musch ! Love this channel.
@deborah_kurata
8 ай бұрын
Great to hear. Thank you!
I love you for your teaching
@deborah_kurata
4 ай бұрын
😊 Thank you very much!
Muchas gracias!!!! thank you for the lesson
@deborah_kurata
2 ай бұрын
Thank you for watching!
Buen video! Gracias
Thank you so much!
@deborah_kurata
4 ай бұрын
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..
@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!
Like before watch
Thank soo much!
@deborah_kurata
Жыл бұрын
You are welcome! Thank you for watching!
very thank you
@deborah_kurata
3 ай бұрын
Thank you for watching!
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
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.
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.
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
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
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!
Thank you for your great explanation Deborah. Do you recommend proceeding with full standalone components without using any modules for new projects?
@deborah_kurata
4 ай бұрын
Thank you for the kind words. Yes, the community is moving toward full standalone components.
nice
@deborah_kurata
3 ай бұрын
Thanks
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
@deborah_kurata
Жыл бұрын
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!!!)
@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
8 ай бұрын
@@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('....'), } ];
@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.