Standalone components

Standalone components are Angular components, directives and pipes that declare their own dependencies and do not need to belong to an NgModule.

In earlier Angular versions every component had to be declared in an NgModule, and the module decided which other components and pipes its templates could use. A standalone component lists what it needs in its own imports array. The component file becomes the full description of its dependencies. In current Angular versions, standalone is the default for new components.

The same idea applies to the whole application. bootstrapApplication starts an application from a root component, and functions such as provideRouter and provideHttpClient replace the modules that used to configure those services.

Example

@Component({
  selector: 'app-user-card',
  imports: [DatePipe],
  template: '<p>{{ user().name }}, since {{ user().joined | date }}</p>',
})
export class UserCardComponent {
  user = input.required<User>();
}

A route can lazy load a component like this directly with loadComponent, without a wrapper module.

Common misunderstanding

Standalone does not mean that NgModules were removed. Existing modules keep working. A standalone component can import an NgModule, and an NgModule can import a standalone component. A codebase can move gradually, and Angular provides an automated migration for most of the work.

The second point is about scope. Standalone changes how template dependencies are declared. How services are provided and how the component behaves at runtime stay the same.

For teams leaving AngularJS, the target is simpler than it used to be: one concept, the component, with explicit imports. In a micro-frontend, a remote can expose a standalone component or a routes array directly. The AngularJS to Angular reference uses standalone code throughout.

Related terms

• Signals
• Lazy loading
• Tree shaking