Can I migrate my routing system incrementally?

Yes, the skill provides strategies for transitioning from the AngularJS $routeProvider to the Angular Router while maintaining navigation consistency across both frameworks.

How does this skill handle dependency injection between versions?

It provides patterns for 'upgrading' AngularJS services so they are available to Angular components, and 'downgrading' Angular services for use in legacy AngularJS code.

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

The skill includes specific code templates for mapping scope properties to @Input and @Output decorators and migrating template syntax to Angular's modern syntax.

What is the benefit of a hybrid migration approach?

A hybrid approach using ngUpgrade allows you to run AngularJS and Angular side-by-side, enabling you to migrate your application feature-by-feature without a total 'big bang' rewrite.

Is this skill compatible with the latest Angular versions?

Absolutely. It follows modern Angular best practices, including TypeScript integration, Reactive Forms, and the latest component communication patterns.

Angular Migration

Name: Angular Migration
Author: Krosebrook

byKrosebrook

•

Learning & Documentation

Facilitates the transition from legacy AngularJS to modern Angular using hybrid strategies, component conversion, and dependency injection patterns.

This skill serves as a comprehensive guide and toolkit for migrating legacy AngularJS (1.x) applications to modern Angular versions. It provides structured pathways for hybrid app setups using ngUpgrade, incremental component rewrites, and complex dependency injection mappings. Whether you are performing a complete rewrite or a feature-by-feature vertical slice migration, this skill offers the specific implementation patterns and best practices needed to modernize legacy frontend codebases while ensuring application stability and continuous delivery.

Key Features

01Hybrid application setup using ngUpgrade for side-by-side framework execution

02Standardized component conversion patterns for AngularJS controllers and directives

03Routing migration strategies from legacy $routeProvider to the modern Angular Router

04Phased migration planning templates from initial setup to legacy code removal

05Cross-framework dependency injection for sharing services between versions

061 GitHub stars

Use Cases

01Automating the transformation of AngularJS services into modern TypeScript Injectables

02Modernizing enterprise-scale AngularJS applications to current Angular versions

03Running legacy and modern code-bases simultaneously during multi-month migrations

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add krosebrook/source-of-truth-monorepo angular-migration

For use in Claude.ai and ChatGPT

Download Skill