Angular Standalone Components by examples

Angular Standalone Components - an introduction

Angular is quite popular in enterprise web apps as it addresses many pressing developer questions in larger dev teams, such as: Which styling library should we use? Which routing should we implement in our web app? And many more.

While this is a clear advantage, the stack has grown over the years and brought some downsides as well: Angular introduces some boilerplate code that has become a bit overwhelming over time. However, the Angular Dev Team is doing great work to simplify it. One of the exciting new features aimed at easing the learning curve and making the overall web app architecture more lightweight is 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 experiment.

Standalone Components

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

Info: Currently, Angular Standalone components are in developer preview. This means they are ready for testing, but may change before they become stable. We do not recommend integrating this feature into production code just yet. Standalone components are expected to be stable in Angular 15.

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

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

It's 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 crucial for ensuring up- and downwards compatible definitions.

Generate standalone components

Let's generate a standalone component using the 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 be 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 utilize the new feature of using 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 is now much more lightweight - 188.25 kb.

Wrap up

Angular standalone components are a promising approach to reduce boilerplate in Angular apps and are well integrated into the current ecosystem. Standalone components are fully up- and downwards compatible, making them easy to integrate into existing apps without major refactoring issues. To use the feature in production, we strongly recommend waiting for Angular 15 - but now is the perfect time to get started with Angular Standalone components.