Angular Standalone Components by examples

Angular Standalone Components - an introduction

Angular is quite popular in enterprise web-apps as it solves many of burning developer questions in bigger dev teams like: Which styling library do we use? Which routing should we use in our web-app? And many more.

Whereas this is a clear pro, the stack grew over the years and brought some downsides as well: Angular brings some boilerplate code which grew a little fierce over the years. But the Angular Dev Team is doing some great work to simplify it. And one of the hot new features to simplify the learning curve and make the overall web app architecture more lightweight are Standalone components.

So let's take a closer look - as always you can find all code samples in a Github repo. Feel free to clone it and play around.

Standalone Components

Standalone components aim to reduce the need for NgModules. This significantly simplifies the boilerplate code and results in more lightweight Angular components.

Info: Currently Angular Standalone components are in developer preview. This means they are ready for a test flight, but might change before they are stable. Currently we do not suggest to integrate the feature into production code. Standalone components are expected to be stable in Angular 15.

Creating a standalone component is very easy: Just mark your component with standalone: true. That's it.

You can see all changes required from the default angular starter to enable an existing component in this Commit 542a8f3.

Important to note: Standalone components define their compilation context via the imports array. In regular Angular components this information comes from the modules.

Standalone components can import other modules and can be imported into other modules. This is important to guarantee up- and downwards compatible definitions.

Generate standalone components

Let's generate a standalone component by CLI:

ng g component another-standalone.component --standalone

generates a new standalone component - the same step as using a "regular" component in Angular, just with the flag --standalone.

Reduce the app to the bare minimum

Let's see how lightweight an Angular app can get and generate a production build with

ng build

When we load the page we see in the Chrome Developer tools: 348.73 kb. Not very lightweight. Let's see how far we can go.

The first step is to refactor the bootstrap function in main.ts to make use of the new feature to use a standalone component as the root component of an Angular application:

Typescriptimport {bootstrapApplication} from '@angular/platform-browser';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent);

The second step is to change the imports of the AppComponent so that the SimpleStandaloneComponent is imported via the imports array.
Remember: The compilation context is not available via NgModules with Standalone components.

The new bundle size now is way more lightweight - 188.25 kb.

Wrap up

Angular standalone components are a promising approach to reduce boilerplate in Angular apps and are very well integrated into the current ecosystem. Standalone components are fully up- and downwards compatible and therefore can easily be integrated into existing apps without big refactoring issues. To use the feature in production we strongly recommend to wait for Angular 15 - but now is the best time to get started with Angular Standalone components.