API Reference

Standalone Components

Standalone components are Angular components that can be used independently without being declared in an NgModule.

Component Decorator Configuration

@Component({
  standalone: true,
  imports: [...], // Required dependencies
  // other component metadata
})

Key Properties

`standalone: boolean`

Marks the component as standalone. When set to true, the component can be used without being declared in an NgModule.

@Component({
  standalone: true,
  selector: "app-my-component",
  template: "<p>Hello World</p>",
})
export class MyComponent {}

`imports: Array<Type<any> | any[]>`

Specifies the dependencies that this standalone component needs. This can include:

Other standalone components
Standalone directives
Standalone pipes
NgModules
Providers

@Component({
  standalone: true,
  imports: [
    CommonModule, // NgModule
    FormsModule, // NgModule
    MyDirective, // Standalone directive
    MyPipe, // Standalone pipe
    ChildComponent, // Standalone component
  ],
  // ...
})
export class ParentComponent {}

Bootstrapping Standalone Apps

`bootstrapApplication()`

Bootstrap a standalone component as the root component of an Angular application.

import { bootstrapApplication } from "@angular/platform-browser";

bootstrapApplication(AppComponent, {
  providers: [
    // Application-wide providers
    provideRouter(routes),
    provideHttpClient(),
    // custom providers
  ],
});

Migration from NgModules

Before (NgModule)

@NgModule({
  declarations: [MyComponent],
  imports: [CommonModule, FormsModule],
  exports: [MyComponent],
})
export class MyModule {}

After (Standalone)

@Component({
  standalone: true,
  imports: [CommonModule, FormsModule],
  // component definition
})
export class MyComponent {}

Lazy Loading Standalone Components

// In routes configuration
const routes: Routes = [
  {
    path: "feature",
    loadComponent: () => import("./feature/feature.component").then((c) => c.FeatureComponent),
  },
];