angular-migration

Migrate AngularJS applications to Angular using hybrid mode and incremental component rewriting.

Updated Apr 23, 2026
One-click install
npx skills add https://github.com/SanketAdlak/PDMProjectDesign --skill angular-migration-sanketadlak
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: angular-migration
Source: https://github.com/SanketAdlak/PDMProjectDesign/tree/main/.agents/skills/angular-migration
Command: npx skills add https://github.com/SanketAdlak/PDMProjectDesign --skill angular-migration-sanketadlak

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Upgrading a legacy AngularJS (1.x) application to modern Angular (2+) is risky and complex, especially for large codebases that cannot afford a full rewrite. This Skill provides structured migration strategies, code conversion patterns, and hybrid-app setup guidance to modernize incrementally without breaking production. ## Core Features & Use Cases - Migration Strategy Selection: Compare Big Bang, Incremental (hybrid via ngUpgrade), and Vertical Slice approaches with guidance on which fits your app size and delivery constraints. - Code Conversion Patterns: Convert AngularJS controllers, directives, and factory services into Angular components and injectable services, including dependency injection upgrades/downgrades. - Routing and Forms Migration: Move from $routeProvider and ng-model templates to Angular Router and Reactive Forms. - Use Case: A team maintaining a large AngularJS dashboard uses the hybrid approach to bootstrap Angular alongside AngularJS, migrates one feature module per sprint, and removes AngularJS entirely in the final cleanup phase. ## Quick Start Ask the AI to help you migrate an AngularJS controller and its service to an Angular component using the hybrid ngUpgrade approach.

Frequently Asked Questions about angular-migration

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

FAQPage Schema
How do I migrate an AngularJS app to Angular?

Choose a strategy based on app size: Big Bang rewrite for small apps, incremental hybrid migration with ngUpgrade for large apps, or vertical slice for distinct features. Then convert controllers to components, factories to injectable services, and $routeProvider to Angular Router.

How to run AngularJS and Angular together in a hybrid app?

Use the UpgradeModule from @angular/upgrade/static. Bootstrap the Angular module with platformBrowserDynamic, then call upgrade.bootstrap inside ngDoBootstrap to start the AngularJS app alongside Angular.

How do I convert an AngularJS directive to an Angular component?

Map the directive's isolate scope bindings to @Input properties and expression callbacks to @Output EventEmitters. Replace the template's ng-click and interpolation syntax with Angular event binding and property binding.

Can AngularJS services be used inside Angular components?

Yes, using an InjectionToken with a factory provider that retrieves the service from AngularJS's $injector. Conversely, downgradeInjectable exposes Angular services to AngularJS code during hybrid operation.

When should I avoid the incremental hybrid migration approach?

Avoid hybrid mode for small apps or greenfield projects where a complete rewrite is faster and cheaper. The hybrid approach adds build complexity and temporary dual-framework overhead, so it suits large apps needing continuous delivery.