skills.rest
oguzhan18
oguzhan18COMMUNITY
Explore all skills by this author →
WebsiteGitHub

angular-standalone

Migrate NgModule-based Angular components to standalone components.

6|1|Updated Feb 18, 2026
Search Tags:#routing#angular#migration#imports#bootstrap#standalone
One-click install
npx skills add https://github.com/oguzhan18/angular-ecosystem-skills --skill angular-standalone
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: angular-standalone
Source: https://github.com/oguzhan18/angular-ecosystem-skills/tree/main/skills/angular-standalone
Command: npx skills add https://github.com/oguzhan18/angular-ecosystem-skills --skill angular-standalone

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill helps convert NgModule-based Angular components and applications to the standalone component model, simplify bootstrapping, and reorganize imports and providers for modern Angular versions.

Core Features & Use Cases

  • Migration Guidance: Step-by-step patterns to transform components, update decorators, and remove or replace NgModules.
  • Bootstrapping & Providers: Examples for using bootstrapApplication, ApplicationConfig, and functional providers such as provideRouter and provideHttpClient.
  • Routing & Lazy Loading: Advice on configuring RouterOutlet, loadComponent-based lazy loading, and preserving routing behavior during migration.
  • Use Case: Migrate a legacy Angular app to standalone components, update main.ts to bootstrap a root standalone component, and refactor shared module imports into component-level imports.

Quick Start

Convert src/app/my.component.ts to a standalone component, update main.ts to use bootstrapApplication(AppComponent) with appropriate ApplicationConfig providers, and adjust imports and routes to match the new standalone structure.

Frequently Asked Questions about angular-standalone

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I migrate an Angular component from NgModule to standalone?▼

You can bootstrap a standalone Angular application by replacing platformBrowserDynamic with bootstrapApplication in main.ts, passing your root component and an ApplicationConfig object. This Skill produces the bootstrap code and configures functional providers like provideRouter and provideHttpClient.

What is the best way to configure routing when converting to Angular standalone components?▼

The best way to configure routing for standalone components is using functional providers like provideRouter with RouterOutlet and loadComponent for lazy loading. This Skill preserves your existing routing behavior and generates the functional routing setup during the migration process.

Can I preserve lazy loading behavior when migrating to Angular standalone components?▼

Yes, you can preserve lazy loading behavior by using the loadComponent property instead of loadChildren for standalone components. This Skill refactors your routing setup to maintain lazy loading patterns while transitioning away from NgModule-based routing configurations.

How do I manage shared module imports after migrating to Angular standalone components?▼

After migrating to standalone components, you manage shared module imports by moving them directly into each component's imports array instead of relying on NgModules. This Skill reorganizes shared dependencies into component-level imports to complete the standalone conversion.

When should I not use Angular standalone components?▼

You should not use Angular standalone components if your application relies on older Angular versions that predate the standalone API or requires heavy legacy NgModule patterns for third-party dependencies. This Skill targets modern Angular versions and produces functional providers that may not be compatible with older setups.

Related Skills

Explore More Software Engineering Skills→
AratKruglikAratKruglik
9

angular-conventions

Detect Angular project conventions and apply matching bootstrap and pattern guidelines.

Community
Advanced
ROU-TechnologyROU-Technology

angular-routing

Implement Angular v20+ routing with lazy loading, guards, resolvers, and signals.

Official
Intermediate
Simon-He95Simon-He95
2.9k

markstream-angular

Integrate markstream-angular into Angular projects with standalone component imports and CSS wiring.

Community
Intermediate
mindcockpit-aimindcockpit-ai
11

angular-migration

Migrate Angular projects across major version gaps with automated schematics.

Official
Advanced