Routing and Lazy Loading with Standalone Components
17.6 هزار بار بازدید -
پارسال
-
Now that we can build
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 Standalone Comp...
Migrating to Standalone Components with Angular CLI: Migrate to Standalone Components usin...
Sample code: https://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 YouTube 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: Twitter: DeborahKurata
Find my Pluralsight courses: https://www.pluralsight.com/profile/a...
Access my freeCodeCamp articles: https://www.freecodecamp.org/news/aut...
View my YouTube content: @deborah_kurata
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
#angular #bestpractices #angulartutorial #angularstandalonecomponents #standalonecomponents #demo #lazyloading #lazyloadinginangular #angularlazyloading #routinginangular #routingangular #angularrouting
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 Standalone Comp...
Migrating to Standalone Components with Angular CLI: Migrate to Standalone Components usin...
Sample code: https://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 YouTube 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: Twitter: DeborahKurata
Find my Pluralsight courses: https://www.pluralsight.com/profile/a...
Access my freeCodeCamp articles: https://www.freecodecamp.org/news/aut...
View my YouTube content: @deborah_kurata
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
#angular #bestpractices #angulartutorial #angularstandalonecomponents #standalonecomponents #demo #lazyloading #lazyloadinginangular #angularlazyloading #routinginangular #routingangular #angularrouting
پارسال
در تاریخ 1402/03/16 منتشر شده
است.
17,632
بـار بازدید شده