skills.rest
ratnesh-maurya
ratnesh-mauryaCOMMUNITY
Explore all skills by this author →
Website𝕏@_ratneshmauryaGitHub

angular-migration

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

1|Updated Aug 17, 2025
Search Tags:#typescript#angular#migration#angularjs#hybrid app#ngupgrade#frontend modernization
One-click install
npx skills add https://github.com/ratnesh-maurya/mdconverter --skill angular-migration-ratnesh-maurya
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: angular-migration
Source: https://github.com/ratnesh-maurya/mdconverter/tree/main/.claude/skills/angular-migration
Command: npx skills add https://github.com/ratnesh-maurya/mdconverter --skill angular-migration-ratnesh-maurya

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Upgrading a legacy AngularJS (1.x) application to modern Angular is risky and complex, especially when a big-bang rewrite is not feasible. This Skill provides structured guidance for planning and executing the migration incrementally without breaking the running application. ## Core Features & Use Cases - Hybrid App Setup: Configure ngUpgrade to run AngularJS and Angular side-by-side, including bootstrapping and module setup. - Component & Service Conversion: Convert AngularJS controllers, directives, and factory services into Angular components and injectable services with before/after code examples. - DI, Routing & Forms Migration: Upgrade and downgrade services across frameworks, migrate $routeProvider routes to Angular Router, and convert ng-model forms to reactive forms. - Use Case: A team maintaining a large AngularJS dashboard needs to modernize it feature by feature while continuing to ship. This Skill guides them through setting up the hybrid app, migrating services first, then converting components per feature with a phased timeline. ## Quick Start Ask the assistant to help plan and execute a migration of your AngularJS application to Angular 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?▼

Use an incremental hybrid approach with ngUpgrade, which runs AngularJS and Angular side-by-side. Migrate services first, then convert components feature by feature, and finally remove AngularJS code after validation.

How to convert an AngularJS controller to an Angular component?▼

Replace $scope bindings with component class properties, move logic into lifecycle hooks like ngOnInit, and inject services through the constructor. Templates switch from ng-click and ng-model to (click) and [(ngModel)] bindings.

Can AngularJS and Angular run in the same application?▼

Yes, the @angular/upgrade/static package enables a hybrid app where both frameworks coexist. You bootstrap AngularJS through UpgradeModule and use downgradeInjectable or upgradeComponent to share services and components across frameworks.

How do I share services between AngularJS and Angular?▼

Use downgradeInjectable to expose Angular services to AngularJS, or create an InjectionToken with a factory reading from $injector to expose AngularJS services to Angular. This allows gradual DI migration without duplicating logic.

When should I choose a big-bang rewrite over incremental migration?▼

A big-bang rewrite suits small applications or greenfield projects where parallel development is affordable. Large apps with continuous delivery needs should use the incremental hybrid approach to avoid risky cutovers without rollback options.

Related Skills

Explore More Software Engineering Skills→
testdino-hqtestdino-hq
9

angularjs

Review AngularJS 1.x code against Google's official style guide.

Official
Basic
ACGSpgpACGSpgp

angular-migration

Migrate AngularJS applications to Angular with hybrid mode support.

Official
Advanced
AratKruglikAratKruglik
9

angular-testing

Configure and execute Angular tests across Karma/Jasmine, Jest, and end-to-end frameworks.

Community
Advanced
pauljbernardpauljbernard
5

Full-Stack Development Excellence

Develop full-stack applications across frontend, backend, databases, and cloud-native platforms.

Community
Advanced