(Truly!?) Component oriented Angular application using Standalone components
If you have been following up Angular updates, you must have heard about
Standalone components introduced in Angular 14 in feature preview.
I have recently delivered a talk to Google I/O Calabar showcasing how to bootstrap a product idea using Standalone component approach.
IO Extended Calabar 2022 | Google Developer Groups
Google I/O is back, online, and free for everyone! I/O connects developers from around the world for thoughtful…
What’s wrong with NgModule?
For a long time, there was a debate — why do we need NgModules? Many seasoned developers find NgModules approach bit complicated, whereas for newbie it is a test to comprehend. Though NgModule brings in many features like a single place to maintain service dependencies, logical grouping of components, providing encapsulation etc., there was an ask to make it optional and build Angular application directly component based.
Well, it is heard by the Angular team, and developers community, and
Standalone components have been introduced.
Comparing NgModule vs Standalone application
In traditional Angular application, the application is bootstrapped with NgModule and it’s
bootstrap property specifying the root component.
In a standalone approach
@Component decorator introduced new property
standalone which can be set to
true to mark it. The standalone components can survive without NgModule, we can get rid of AppModule. We can directly delete the
The application start from
main.ts, and as we saw earlier, we provided
AppModule to bootstrap application. However, if we have deleted
AppModule, how we can tell Angular which one is our root component. To do so, we can call a new method
bootstrapApplication passing the root component and optional parameters specifying dependencies where routing can be specified.
Notice, how we are passing the routes. The
importProvidersFrom function extracts the required providers from
RouterModule.fromRoot. Why is that? Normally, we specify our routes in NgModules (AppRoutingModule), and pass it to
But, we have removed the
AppModule file itself. To specify routes to Angular’s
Router service, we need to use
importProvidersFrom. We can rename the
app-routing.module.ts file just
app-routing.ts and remove the
With these changes, we have converted our Angular application with only components. No NgModules! Of course, you can create, and have a mix of NgModules and standalone components, import other feature components, material design components, services, pipes into the Component itself.
In your actual work project, you should start gradually converting NgModules to standalone components instead of writing it from scratch.
You can find the complete source code with standalone components here.
GitHub - ultrasonicsoft/connectedIn: Google IO Extended Calabar exercise
This project was generated with Angular CLI version 14.0.1. Run ng serve for a dev server. Navigate to…
The demo application is deployed here.