Angular standalone components
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
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
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
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