angular-standalone skill by oguzhan18 | SkillBundle

OverviewHistoryStatsSecurity

npx skills add ...

Documentation

SKILL.md

angular-standalone skill by oguzhan18 | SkillBundle

ALWAYS use when working with Angular Standalone Components, imports array, bootstrapping, or migrating from NgModules in Angular applications.

npx skills add oguzhan18/angular-ecosystem-skills --skill angular-standalone

Documentation

SKILL.mdView source

Angular Standalone Components

Version: Angular 21 (2025) Tags: Standalone, Components, Imports, Bootstrap

References: Standalone Guide • Migration

API Changes

This section documents recent version-specific API changes.

NEW: Standalone by default — New components are standalone by default since Angular 17
NEW: provideRouter for standalone — Use functional providers instead of RouterModule
NEW: ng generate @angular/core:standalone — Migration schematic
DEPRECATED: NgModule — Migration to standalone components recommended

Best Practices

Create standalone components

@Component({
  standalone: true,
  imports: [CommonModule, MatButtonModule],
  selector: 'app-my',
  template: `<button>Click</button>`
})

Use imports array for dependencies

Bootstrap standalone component

Use functional providers

Use provideZoneChangeDetection

Migrate from NgModule

Use Router Outlet with standalone

Lazy load standalone components

Use forwardRef for circular imports

Export standalone components

@Component({
  standalone: true,
  imports: [
    CommonModule,
    RouterModule,
    MatCardModule,
    MyChildComponent
  ],
  template: `
    <mat-card>
      <app-my-child></app-my-child>
    </mat-card>
  `
})
export class ParentComponent {}

// main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { appConfig } from './app/app.config';
 
bootstrapApplication(AppComponent, appConfig)
  .catch(err => console.error(err));

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideHttpClient(),
    provideAnimations()
  ]
};

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true })
  ]
};

# Full migration
ng generate @angular/core:standalone
 
# Specific component
ng generate @angular/core:standalone --path=path/to/component

@Component({
  standalone: true,
  imports: [RouterOutlet],
  template: `<router-outlet></router-outlet>`
})
export class AppComponent {}

const routes: Routes = [
  {
    path: 'admin',
    loadComponent: () => import('./admin/admin.component').then(m => m.AdminComponent)
  }
];

@Component({
  standalone: true,
  imports: [forwardRef(() => OtherComponent)]
})
export class MyComponent {}

@Component({
  standalone: true,
  exports: [MyComponent],
  imports: [MyComponent]
})
export class FeatureComponent {}