JESSICA JANIUK: Hey, friends. I'm Jessica and I'm
standing here alone today to tell you about our latest
feature, standalone components. [MUSIC PLAYING] 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. [MUSIC PLAYING]
