Hi Friends We know components are the basic
building blocks in Angular. When we create a component, we need
to declare in the module in which we are going to use that component.
Otherwise, it will throw error. However, starting from Angular 14, we can create components that exist independently
without being part of any ngModule. Those components are called Standalone components. In Angular 15, the standalone
components becomes stable. Till Angular 16, while creating a component
using the ng generate component command, we can use the flag hyphen hyphen
standalone to create a standalone component. But starting from Angular 17, if you
are going to create a component using the ng generate component command, it will
create the standalone component by default. That means we are slowly moving
towards the standalone components. In future versions of Angular, I feel standalone
components are going to play a vital role. In near future, if you are planning to upgrade
your application from Angular 16 to 17, you should have good knowledge on
standalone components. Otherwise the migration is going to be a nightmare. So, I believe now you would have understood the importance of learning
about standalone components. In this video, I am going to explain
about the need for standalone components, it's advantages, the difference between the
normal components and standalone components and how we can improve the performance of
our application using standalone components. Let's start. First I want to talk about the difference between
a normal component and a standalone component. I have installed Angular 16.
Let me create a new application. Now in this application, let
me create a normal component. And then, let me use the standalone
flag to create a standalone component. Ok, let me open this in VS code. We can see, the normal component alone
has been imported in the app module. And in the standalone component, we can see
two new properties have been introduced. Standalone true. This informs angular that
this component can operate independently and does not rely
on other modules or components. And using this imports array, we can import the
component specific dependencies. That means, this component does not require
any specific module imports. Ok. Now, let's try to use both of
our components in our app component. As the normal component has been already
declared in app module, it is fine. But, as this special component has not been
declared in app module it is throwing error. Ok. How can we fix this? We should not declare this in app
module. Instead, we need to import this. Now, we can see the error is gone. And, if we preview we can see both the components. Let me create one more standalone component. And, let me use this component in
our existing standalone component. Now also, it is showing error. This time, instead of importing in the app module,
I can use this imports array to import. Ok, I believe you should have get some idea now. Let me install angular 17. Now, let me create a new application. We can see by default the app component has been created as standalone component and
the app module has not been created. Let me create a new component
without standalone flag. We can see, even the new component
created is also standalone component. So, in case if you have already
upgraded your angular cli to 17 and for some reason you need to
create non standalone components. That means an application with app module. How can you do? You can use the flag, hyphen
hyphen no hyphen standalone. Now, we can see the app module has been created and the app component is also
not a standalone component. Fine, we understood the difference between a normal component and a
standalone component in angular. But, why do we need standalone components
in Angular. Does it has any advantage?. Standalone components provide a simplified
way to build angular applications. It reduce the need for NgModule. Modules may have unused components &
services. Those increase the bundle sizes. By transforming individual components into
standalone components we can elliminate the unnecessary imports and unused dependencies. Also, by isolating components
into standalone modules, we achieve improved modularity,
reusability and maintainability. In my previous video, I have explained how we can use lazy loading to improve the
performance of our application. And, I want to say that we can lazy
load the standalone components also. Let me show you. I have created this application.
This is created using Angular 17. Here, I have a home component, user
component and an admin component. All these are standalone components. I have also added the routes and in app
component, I have added the navigation links. So, on clicking these links
we can go to various pages. Ok. Let's see how we can
lazy load this admin route. The syntax is almost similar
to lazy loading a module. In case of module, we use loadChildren,
but here we need to use loadComponent. Now, let me refresh this and let me clear this. If I go to user route, nothing is downloaded
because user is already part of main bundle. Let me go to admin route, now you
can see it will get downloaded here. That means, it is getting loaded lazily. So, using standalone components
and lazy loading we can improve the performance of the angular application a lot. Hope you understood. Please like this video and subscribe
to this channel and support me. Thank you. Bye.
