What this prompt does
This prompt produces a refactor plan for moving an Angular [angular_version] app from NgModules to standalone components. Starting from [module_count] modules and [component_count] components, it sets a migration order — leaf components first, then containers — and converts components to standalone with proper imports arrays before removing NgModules and updating routing to lazy-load standalone components.
The structure works because it modernizes the app without freezing the roadmap. It migrates to the new control flow syntax (@if, @for, @switch, @defer), adds @defer blocks for [defer_candidates] with loading and error states, switches dependency injection to the inject() function, and converts [signal_candidates] from observables to signals. Migrating routing last and leaves first means nothing breaks mid-flight, and a migration progress report tracks how far the refactor has come.
The testing and tooling steps keep the refactor honest. Standalone component testing with provider overrides means specs keep working as components drop their NgModules, and the plan calls out using Angular schematics wherever they exist to automate the mechanical conversions. That leaves your manual effort for the genuinely tricky container components and the routing rewire, instead of spending it on repetitive boilerplate the tooling can handle for you across [component_count] components.
When to use it
- You want to move an Angular app off NgModules to standalone components and cut boilerplate.
- You need a migration order so leaf components convert first and containers follow safely.
- You want to adopt the new control flow syntax (@if, @for, @switch, @defer).
- You want @defer blocks for heavy
[defer_candidates]like charts or editors. - You are converting
[signal_candidates]from observables to signals. - You want better tree-shaking from dropping NgModules and a progress report to track it.
Example output
Expect a refactor playbook: a leaf-first migration order, component conversions to standalone with imports arrays, NgModule removal and lazy-loaded routing updates, control-flow syntax migration, @defer blocks for [defer_candidates] with loading and error states, inject()-based dependency injection, signal conversions for [signal_candidates], and a migration progress report. Where Angular schematics exist, it includes a migration script to automate steps.
Pro tips
- Confirm
[angular_version]supports the features you want; @defer and the new control flow require recent Angular versions. - Migrate leaf components first as the order specifies, so containers inherit already-standalone children and nothing breaks underneath them.
- Apply @defer only to genuinely heavy
[defer_candidates]; deferring trivial components adds complexity for no real gain. - Convert
[signal_candidates]that are simple synchronous state to signals, but leave async streams on RxJS rather than forcing signals everywhere. - Use Angular schematics where available to automate the mechanical parts and reserve manual effort for the tricky containers.
- Save routing changes for last; updating lazy-loading before components are standalone invites mid-migration breakage.
- Switch to the inject() function for dependency injection as you convert each component, so the new pattern is consistent across the codebase.
- Keep the migration progress report visible to the team so everyone knows which
[component_count]components are done and what remains.
