Stand alone components in Angular

What if you could build Angular apps without NgModules? Discover how standalone components streamline development, simplify architecture, and boost performance.

#1about 3 minutes

Understanding the history and limitations of NgModules

Angular evolved from AngularJS to a module-based system with NgModules, which introduced challenges like a steep learning curve and inefficient lazy loading.

#2about 2 minutes

Using the SCAM pattern before standalone components

The Single Component Angular Module (SCAM) pattern was a community-driven workaround to associate one module with one component, improving locality but not eliminating NgModules.

#3about 2 minutes

Key benefits of the new standalone component APIs

Standalone components, introduced in Angular 14, simplify the framework by enabling component-level lazy loading and state management without requiring NgModules.

#4about 2 minutes

How to create and configure standalone components

Generate standalone components using the --standalone flag or schematics, and manage dependencies directly within the component's `imports` array.

#5about 4 minutes

Implementing routing and bootstrapping without NgModules

Use the `loadComponent` function for lazy-loaded routes and the `bootstrapApplication` function to start an application with a root standalone component and global providers.

#6about 3 minutes

Migrating to standalone and architecting your application

Use the Angular CLI's automated migration schematic to convert an existing application, and organize features using folder structures, barrel files, or monorepo tools like Nx.

#7about 6 minutes

Answering common questions about standalone components

This Q&A covers whether NgModules will be deprecated, how to structure domain logic, differences in lazy loading, and how to mock components for testing.