Migration vers angular

--- name: angular-migration description: "Master AngularJS to Angular migration, including hybrid apps, component conversion, dependency injection changes, and routing migration." risk: unknown source: community date_added: "2026-02-27" --- # 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 ### 1. Big Bang (Complete Rewrite) - Rewrite entire app in Angular - Parallel development - Switch over at once - Best for: Small apps, green field projects ### 2. Incremental (Hybrid Approach) - Run AngularJS and Angular side-by-side - Migrate feature by feature - ngUpgrade for interop - Best for: Large apps, continuous delivery ### 3. Vertical Slice - Migrate one feature completely - New features in Angular, maintain old in AngularJS - Gradually replace - Best for: Medium apps, distinct features ## Hybrid App Setup ``typescript // main.ts - Bootstrap hybrid app import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { UpgradeModule } from '@angular/upgrade/static'; import { AppModule } from './app/app.module'; platformBrowserDynamic() .bootstrapModule(AppModule) .then(platformRef => { const upgrade = platformRef.injector.get(UpgradeModule); // Bootstrap AngularJS upgrade.bootstrap(document.body, ['myAngularJSApp'], { strictDi: true }); }); ` `typescript // app.module.ts import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { UpgradeModule } from '@angular/upgrade/static'; @NgModule({ imports: [ BrowserModule, UpgradeModule ] }) export class AppModule { constructor(private upgrade: UpgradeModule) {} ngDoBootstrap() { // Bootstrapped manually in main.ts } } ` ## Component Migration ### AngularJS Controller → Angular Component `javascript // Before: AngularJS controller angular.module('myApp').controller('UserController', function($scope, UserService) { $scope.user = {}; $scope.loadUser = function(id) { UserService.getUser(id).then(function(user) { $scope.user = user; }); }; $scope.saveUser = function() { UserService.saveUser($scope.user); }; }); ` `typescript // After: Angular component import { Component, OnInit } from '@angular/core'; import { UserService } from './user.service'; @Component({ selector: 'app-user', template: <div> <h2>{{ user.name }}</h2> <button (click)="saveUser()">Save</button> </div> }) export class UserComponent implements OnInit { user: any = {}; constructor(private userService: UserService) {} ngOnInit() { this.loadUser(1); } loadUser(id: number) { this.userService.getUser(id).subscribe(user => { this.user = user; }); } saveUser() { this.userService.saveUser(this.user); } } ` ### AngularJS Directive → Angular Component `javascript // Before: AngularJS directive angular.module('myApp').directive('userCard', function() { return { restrict: 'E', scope: { user: '=', onDelete: '&' }, template: <div class="card"> <h3>{{ user.name }}</h3> <button ng-click="onDelete()">Delete</button> </div> }; }); ` `typescript // After: Angular component import { Component, Input, Output, EventEmitter } from '@angular/core'; @Component({ selector: 'app-user-card', template: <div class="card"> <h3>{{ user.name }}</h3> <button (click)="delete.emit()">Delete</button> </div> }) export class UserCardComponent { @Input() user: any; @Output() delete = new EventEmitter<void>(); } // Usage: <app-user-card [user]="user" (delete)="handleDelete()"></app-user-card> ` ## Service Migration ``javascript // Before: AngularJS service angular.module('myApp').factory('UserService', function($http) { return { getUser: function(id) { return $http.get('/api/users/' + id); }, saveUser: function(user) { return $http.p