Introduction to Standalone Components
Hey, friends. I'm Jessica and I'm standing here alone today to tell you about our latest feature, standalone components.
Angular applications are composed of components. And until now, developers have had to create or update an existing ng module in order to use a freshly created component. Ng modules have been used to specify which components, directives, and pipes are available to use in templates.
The new standalone API makes it possible to write angular components, directives, and pipes without creating an associated ng module. Standalone components are self contained and directly manage their template dependencies. This makes ng modules optional for many practical development tasks. The focus shifts from ng modules to components. Components are becoming a central concept in Angular.
The Benefits of Going Standalone
Let's discuss the benefits of this new approach. Making ng modules optional reduces the friction of creating a new component. There's just less code to write and less files to open and modify. But this is more than just the syntax change. We lower the number of concepts a developer needs to understand. This is essential for simplifying the Angular learning journey.
Most importantly, the self contained components can be packaged, reused, and lazy loaded on their own. This enables a range of use cases that were just very hard or even impossible to achieve before.
Scaffolding the Demo Application
To get a feel for these new APIs, let's create an application for a local dog friendly community. It can be used to arrange the walk my dog help among neighbors. This application has a list and the details view.
Let's start by scaffolding our application using the Angular CLI. I'm using the ng new command in a terminal window. We'll use inline templates and styles for this example. That's why we use the --inline flag. I'm going to add the routing so we can navigate between pages. Regular CSS will do for our sample application.
We'll also need some data to display. So let's quickly generate some services with mock data using the ng generate command. I'm going to switch to the Code Editor, open up the generated dogs.service.ts file and just paste some sample data that I've prepared before.
Creating Your First Standalone Component
With all the preparations done, I can create the very first standalone component. It will display a list of dogs that could get some fresh air. Angular CLI will be helpful to quickly scaffold the component code. Notice that I'm passing the new --standalone option to the ng generate schematic. Such a dashing option.
In our generated component DogsListComponent.ts, the component decorator has a new property called standalone that has the value set to true. This component is now a standalone component and doesn't require declaration in any ng module.
There's another property in the component decorator called imports that has an array containing common module in it. Now the component can use ng if, ng for, and other control flow directives.
The dogs list component will display data from a NOC data service that is injected in the constructor in DogsListComponent.ts. With the data ready, we can add some basic HTML to component.html and display the data. We'll improve the look and feel of this component later.
Configuring Routing for Standalone Components
We need one final step before testing our list component. Update the router configuration. I'm creating a new route entry in the AppRoutingModule.ts file previously generated by the CLI. Next we'll add our standalone component directly to the router configuration routes variable by using the path and component properties. I'm also setting up a router redirect so that our list is displayed by default. At this point, we will have a working list page rendered by a standalone component.
So let's test it together. I'm going to open up a terminal and start a development server with the ng serve command. Let's confirm that everything works as expected by navigating to localhost at port 4200 in the browser. Our list renders OK, but it's not very pretty yet.
Composing Standalone Components
Let's improve the design by introducing a dog card component. Using Angular CLI again, I'm scaffolding a new standalone component using the ng generate component command in a terminal.
In DogsListCardComponent.ts, I'll update the template and style's property of the component decorator by adding some previously written code. A dog's info will be passed into this component as an input.
At this point, I've got two standalone components. A list and a card. How could I use a card in a list though? Let me switch back to the dogs list component and import the card we've just created. Importing a standalone component makes it available in the template and can be referenced in the component template by its selector. In this case, app dogs list card.
Remember that before standalone components, you had to add a reference to an ng module to make a component available for use in the other parts of the application. And now that's no longer necessary. Standalone components explicitly manage their own dependencies. We can know with certainty what is available in the template by expecting the component's list of imports. And this is of great importance.
Building and Routing the Details View
Our list is done. I'm going to create the details view component now following similar coding patterns. So here's a view of that. From the command line, I'll type ng generate component, once again using the --standalone option.
In the dog view component class, the dog's ID will be passed in as a router param, so I need to inject the activated route and the dogs service in the constructor. Setting up a subscription to the route param changes will make sure that we update the dog's data when navigating between pages.
To test the details view, we need to add the dog view component to a router configuration and link to it from the ListComponentRoutes.ts file. Then, we need to link to it from the dogs list component. We will update the router configuration by opening the AppRoutingModule.ts file and add the new entry in the routes array.
With the new route entry in place, we can now open the dogs list component file and introduce a router link. A standalone component explicitly imports its template dependencies. So we need to add the router module to the list of component imports. With this step done, we can add a link to the detailed view component with a router link attribute.
Testing the Full Application Flow
We can now test the entire functionality of the application. In a browser, I can open up the application URL and still see the list. This is good, but now I can also click on the Details link and navigate to the page dedicated to a given dog.
At this point, we know how to create standalone components and manage their template dependencies. We've also successfully used routing to navigate between pages rendered by standalone components.
Simplified Lazy Loading with Standalone Components
I'd like to focus now on one of the major benefits of standalone components, simplified lazy loading. The new functionality in Angular router enables fine grained lazy loading and code splitting on a component level. To demonstrate it in practice, we will lazy load the details view component.
Let's navigate to the router configuration in app routing module and change the route entry for dog view component. We need to, one, change the component property to the load component one. Two, change the component type to the dynamic import. And three, remove the static import to the component type.
Let's confirm that the dog view component code is lazy loaded in the browser. In Chrome DevTools, open the Network tab. That way we can observe the lazy loaded activity when taking action. Now back in the app, click on the Details link. You'll notice that the code for the dog view component is downloaded and executed right when we click. That demonstrates that the code load is delayed and only happens when the root is loaded. This means the application can load and bootstrap faster because this route was not part of the main bundle and it loads separately.
Switching a route in the application to lazy loaded mode took us just a few seconds. We hope this leads to a better experience for developers.
Availability and Developer Preview Status
All the new functionality and APIs discussed today are available right now in Angular version 14. Standalone components are fully compatible with your existing Angular applications. They don't introduce any breaking changes and they don't require any rewrites. In v14 we've released the standalone APIs as developer preview.
This means that the APIs are complete, polished, and available for you to experiment with and to explore. However, we're not quite ready to mark them as stable APIs just yet. If we get feedback from our developer community that they're not working well in certain use cases, we want to be able to make adjustments right away without waiting for our regular deprecation timeline of two major versions for stable APIs.
Making ng modules optional requires adjustments to the entire Angular ecosystem. We are releasing core functionality today but have several follow up projects lined up.
Future Plans and Call to Action
We will keep improving APIs, tooling, and documentation around standalone components. The goal is to make the developer journey as smooth as possible. We'd really like you to test out the new APIs and share your feedback. We can't wait to hear about your new developer experiences. If you have an issue, a feature request, or something else, please open a GitHub issue and let us know.
Links to the example project and the Angular documentation are in the description of this video. Subscribe to this channel and follow us on Twitter for more updates. This video certainly won't stand alone in your learning journey for Angular. There are many more for you to enjoy. Thanks for watching, everyone. And hey, live long and prosper, friends.
