Angular standalone components

How to generate, bootstrap, and lazy load Angular standalone components.

Kevin Kreuzer

--

In version 14, Angular will release an impressive new feature named standalone components. Standalone components allow us to write Angular applications without NgModules.

Why standalone components? Standalone components means no NgModules. NgModules are often confusing for new Angular developers. It’s an additional Angular-specific concept and there’s often confusion between Angular Modules and ES modules. Furthermore, standalone components can be really useful for applications that use the SCAM architecture pattern.

In this blog post, we will find out how we can create an application with a prerelease version of Angular, how we can bootstrap a standalone component, how we can use Angular schematics to generate a standalone component, and how we can finally lazy load a standalone component.

☝️ Standalone components aren’t yet officially released. Therefore, throughout this article, we use a pre-release version. The API might still change once the final version is released. Of course, I will then update this article.😉

Generate an application with a prerelease version

npx @angular/cli@next new lonely-components

We use the next version of the Angular CLI to scaffold a new project named lonely-components.

If we explore the generated code, we notice that our workspace looks the same as always. No surprises here. An application got scaffolded, an application with an app.module.ts and an app.module.routing.ts file.

Didn’t we say we want to bootstrap standalone components? Why are there still NgModules? Well, you are right! We don’t need NgModules. Let’s delete the app.module.ts and the app.module.routing.ts.

Great, we broke everything. Let’s fix it with standalone components!

Bootstrap a standalone component

The first standalone component we will create is the app.componen.ts. To turn our AppComponent into a standalone component, we have to adjust its component decorators. We will add a standalone flag and set its value to true.

--

--

Kevin Kreuzer

Passionate freelance frontend engineer. ❤️ Always eager to learn, share and expand knowledge.