Angular Migration

---
version: 4.1.0-fractal
name: angular-migration
description: Migrate from AngularJS to Angular using hybrid mode, incremental component rewriting, and dependency injection updates. Use when upgrading AngularJS applications, planning framework migrations, or modernizing legacy Angular code.
---

# Angular Migration

Master AngularJS to Angular migration, including hybrid apps, component conversion, dependency injection changes, and routing migration.

## Use this skill when

- Migrating AngularJS (1.x) applications to Angular (2+)
- Running hybrid AngularJS/Angular applications
- Converting directives to components
- Modernizing dependency injection
- Migrating routing systems
- Updating to latest Angular versions
- Implementing Angular best practices

## Do not use this skill when

- You are not migrating from AngularJS to Angular
- The app is already on a modern Angular version
- You need only a small UI fix without framework changes

## Instructions

1. Assess the AngularJS codebase, dependencies, and migration risks.
2. Choose a migration strategy (hybrid vs rewrite) and define milestones.
3. Set up ngUpgrade and migrate modules, components, and routing.
4. Validate with tests and plan a safe cutover.

## Safety

- Avoid big-bang cutovers without rollback and staging validation.
- Keep hybrid compatibility testing during incremental migration.

## Migration Strategies

## 🧠 Knowledge Modules (Fractal Skills)

### 1. [1. Big Bang (Complete Rewrite)](./sub-skills/1-big-bang-complete-rewrite.md)
### 2. [2. Incremental (Hybrid Approach)](./sub-skills/2-incremental-hybrid-approach.md)
### 3. [3. Vertical Slice](./sub-skills/3-vertical-slice.md)
### 4. [AngularJS Controller → Angular Component](./sub-skills/angularjs-controller-angular-component.md)
### 5. [AngularJS Directive → Angular Component](./sub-skills/angularjs-directive-angular-component.md)
### 6. [Downgrading Angular → AngularJS](./sub-skills/downgrading-angular-angularjs.md)
### 7. [Upgrading AngularJS → Angular](./sub-skills/upgrading-angularjs-angular.md)