I Wanna Be Developer

Standalone Components in Angular

import(`./subsection/subsection.module`).then( m => m.SubsectionModule ) } ]; The module would have to load all components, providers, and could even include it's own router. I always found this to be a lot of boilerplate code just to implement lazy loading. Now with a standalone component, we can make it simpler, which I love. First, let's create a simple routes that does not include lazy loading. Open up the app-routing.module.ts file: const routes: Routes = [ { path: 'view1', component: WrapperComponent }, { path: '**', redirectTo: 'view1' } ]; The first route is named view1, and points to WrapperComponent. I also added a catch all route, distinguished by the two asterisks in the path. The catch all route redirects to the view1. Now, open up app.component.html: Remove this and replace it with the router outlet: With this approach, we can remove the component import from the app.module.ts. Instead of this: imports: [ BrowserModule, AppRoutingModule, WrapperComponent ], We can just do this: imports: [ BrowserModule, AppRoutingModule ], Recompile the app, and load it in the browser: You can see the route in the browser at view1. Start typing to make sure it all works: All good to go; so, we've proved that the stand-alone components are working fine with the router. But, the use of the router here mirrors what we did in the main books, which did not investigate lazy loading at all. How do we set up lazy loading of the module? Back to the app-routing.module.ts and replace the view1 route with this: { path: `view1`, loadComponent: () => import(`./wrapper/wrapper.component`).then( m => m.WrapperComponent ) }, The syntax is very similar to the lazy loading segment I shared earlier. Instead of a loadChildren() method, we now use a loadComponent() method. The value is an arrow functions. The arrow function uses the import command to load in the component. The import returns, surprisingly, a promise. We resolve the promise with the then() method, and the result handler returns the component. You can re-run the app right now to see that it is continuing to work, but to see the real power of lazy loading, let's create another route and view. Let's create a new component: ng generate component view2 --standalone You'll see something like this: We're not going to implement a lot of functionality in the View2Component, only using it to link between the two respective views. Take a look at the default view2.component.ts: import { Component } from '@angular/core'; import { CommonModule } from '@angular/common'; @Component({ selector: 'app-view2', standalone: true, imports: [CommonModule], templateUrl: './view2.component.html', styleUrls: ['./view2.component.css'] }) export class View2Component { } To tell Angular to link between routes, we'll need to load in the RouterModule as part of the imports configuration: imports: [CommonModule, RouterModule], And don't forget the TypeScript import: import {RouterModule} from "@angular/router"; Open up view2.component.html. Replace all the contents with a link back to View1: Goto View1 For View2Component that's all we need. Let's go back to View1 which is powered by WrapperComponent. First, we'll need to tell it about the RouterModule in the component config imports: imports: [CommonModule, DisplayComponent, EditComponent, RouterModule], Don't forget the TypeScript import: import { RouterModule } from '@angular/router'; This is the same as what we did in the View2Component. We'll made a similar addition in the wrapper.component.html: Goto View2 I added a link to view2 in front of the other two components in the WrapperComponent. Now, open up the app-routing.module.ts. I'm going to show you the two cases, and how the browser interacts differently. First, with no lazy loading setup: const routes: Routes = [ { path: 'view1', component: WrapperComponent }, { path: 'view2', component: View2Component }, { path: '**', redirectTo: 'view1'} ]; Run the app, and take a look at the network console: Click in the browser between the two views and you'll notice nothing changes in the network tab. Everything is loaded all at once. Now, let's switch back to lazy loading in the app-routing.module.ts: const routes: Routes = [ { path: `view1`, loadComponent: () => import(`./wrapper/wrapper.component`).then( m => m.WrapperComponent ) }, { path: `view2`, loadComponent: () => import(`./view2/view2.component`).then( m => m.View2Component ) }, { path: '**', redirectTo: 'view1' } ]; We've already explored the view1 route and the catch all redirect route. This includes a view2 route, which loads the View2Component. Now reload the app in the browser and review the network tab: We load most of the same files. One thing you'll notice is that main.js is a lot smaller. And there is also a an additional js file loaded, which corresponds to the WrapperComponent. The end result is that we have less data loaded on the initial app load--which means your users are using the application much quicker. Click over to View2: I didn't clear out the network tab before clicking, but primarily you see View2Component loaded, but not until we clicked on the link to load that view. It is beyond the scope of this article to go into the benefits and specifics of lazy loading, but let's just say I love this use case for stand-alone components, because it is something that clearly removes a lot of boilerplate. Final Thoughts I learned a lot by exploring this post, and writing the chapter in my book. I hope you learned a lot reading it. I'm not sure how I feel about standalone components yet, but I do see them as a one way to make Angular applications easier to build, especially around lazy loading. I also see a lot of potential using them in libraries, where you want to optimize a component for reuse. If you've gotten this far, thank you for reading. Be sure to check out the bonus book from the Learn With Series on Angular 15 , which includes a more in depth version of this post with more samples including using services with standalone components, bootstrapping an application without using a module, and learning how to test stand alone components.

Feeds