Angular standalone components

How to generate, bootstrap, and lazy load 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