{"id":"17070665-595d-48a3-b91d-5f5bacb6e497","shortId":"uHPpVw","kind":"skill","title":"angular-migration","tagline":"Master AngularJS to Angular migration, including hybrid apps, component conversion, dependency injection changes, and routing migration.","description":"# Angular Migration\n\nMaster AngularJS to Angular migration, including hybrid apps, component conversion, dependency injection changes, and routing migration.\n\n## Use this skill when\n\n- Migrating AngularJS (1.x) applications to Angular (2+)\n- Running hybrid AngularJS/Angular applications\n- Converting directives to components\n- Modernizing dependency injection\n- Migrating routing systems\n- Updating to latest Angular versions\n- Implementing Angular best practices\n\n## Do not use this skill when\n\n- You are not migrating from AngularJS to Angular\n- The app is already on a modern Angular version\n- You need only a small UI fix without framework changes\n\n## Instructions\n\n1. Assess the AngularJS codebase, dependencies, and migration risks.\n2. Choose a migration strategy (hybrid vs rewrite) and define milestones.\n3. Set up ngUpgrade and migrate modules, components, and routing.\n4. Validate with tests and plan a safe cutover.\n\n## Safety\n\n- Avoid big-bang cutovers without rollback and staging validation.\n- Keep hybrid compatibility testing during incremental migration.\n\n## Migration Strategies\n\n### 1. Big Bang (Complete Rewrite)\n- Rewrite entire app in Angular\n- Parallel development\n- Switch over at once\n- **Best for:** Small apps, green field projects\n\n### 2. Incremental (Hybrid Approach)\n- Run AngularJS and Angular side-by-side\n- Migrate feature by feature\n- ngUpgrade for interop\n- **Best for:** Large apps, continuous delivery\n\n### 3. Vertical Slice\n- Migrate one feature completely\n- New features in Angular, maintain old in AngularJS\n- Gradually replace\n- **Best for:** Medium apps, distinct features\n\n## Hybrid App Setup\n\n```typescript\n// main.ts - Bootstrap hybrid app\nimport { platformBrowserDynamic } from '@angular/platform-browser-dynamic';\nimport { UpgradeModule } from '@angular/upgrade/static';\nimport { AppModule } from './app/app.module';\n\nplatformBrowserDynamic()\n .bootstrapModule(AppModule)\n .then(platformRef => {\n const upgrade = platformRef.injector.get(UpgradeModule);\n // Bootstrap AngularJS\n upgrade.bootstrap(document.body, ['myAngularJSApp'], { strictDi: true });\n });\n```\n\n```typescript\n// app.module.ts\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { UpgradeModule } from '@angular/upgrade/static';\n\n@NgModule({\n imports: [\n BrowserModule,\n UpgradeModule\n ]\n})\nexport class AppModule {\n constructor(private upgrade: UpgradeModule) {}\n\n ngDoBootstrap() {\n // Bootstrapped manually in main.ts\n }\n}\n```\n\n## Component Migration\n\n### AngularJS Controller → Angular Component\n```javascript\n// Before: AngularJS controller\nangular.module('myApp').controller('UserController', function($scope, UserService) {\n $scope.user = {};\n\n $scope.loadUser = function(id) {\n UserService.getUser(id).then(function(user) {\n $scope.user = user;\n });\n };\n\n $scope.saveUser = function() {\n UserService.saveUser($scope.user);\n };\n});\n```\n\n```typescript\n// After: Angular component\nimport { Component, OnInit } from '@angular/core';\nimport { UserService } from './user.service';\n\n@Component({\n selector: 'app-user',\n template: `\n \n
{{ user.name }} \n Save \n \n `\n})\nexport class UserComponent implements OnInit {\n user: any = {};\n\n constructor(private userService: UserService) {}\n\n ngOnInit() {\n this.loadUser(1);\n }\n\n loadUser(id: number) {\n this.userService.getUser(id).subscribe(user => {\n this.user = user;\n });\n }\n\n saveUser() {\n this.userService.saveUser(this.user);\n }\n}\n```\n\n### AngularJS Directive → Angular Component\n```javascript\n// Before: AngularJS directive\nangular.module('myApp').directive('userCard', function() {\n return {\n restrict: 'E',\n scope: {\n user: '=',\n onDelete: '&'\n },\n template: `\n \n
{{ user.name }} \n Delete \n \n `\n };\n});\n```\n\n```typescript\n// After: Angular component\nimport { Component, Input, Output, EventEmitter } from '@angular/core';\n\n@Component({\n selector: 'app-user-card',\n template: `\n \n
{{ user.name }} \n Delete \n \n `\n})\nexport class UserCardComponent {\n @Input() user: any;\n @Output() delete = new EventEmitter();\n}\n\n// Usage: {\n return this.http.get(`/api/users/${id}`);\n }\n\n saveUser(user: any): Observable {\n return this.http.post('/api/users', user);\n }\n}\n```\n\n## Dependency Injection Changes\n\n### Downgrading Angular → AngularJS\n```typescript\n// Angular service\nimport { Injectable } from '@angular/core';\n\n@Injectable({ providedIn: 'root' })\nexport class NewService {\n getData() {\n return 'data from Angular';\n }\n}\n\n// Make available to AngularJS\nimport { downgradeInjectable } from '@angular/upgrade/static';\n\nangular.module('myApp')\n .factory('newService', downgradeInjectable(NewService));\n\n// Use in AngularJS\nangular.module('myApp').controller('OldController', function(newService) {\n console.log(newService.getData());\n});\n```\n\n### Upgrading AngularJS → Angular\n```typescript\n// AngularJS service\nangular.module('myApp').factory('oldService', function() {\n return {\n getData: function() {\n return 'data from AngularJS';\n }\n };\n});\n\n// Make available to Angular\nimport { InjectionToken } from '@angular/core';\n\nexport const OLD_SERVICE = new InjectionToken('oldService');\n\n@NgModule({\n providers: [\n {\n provide: OLD_SERVICE,\n useFactory: (i: any) => i.get('oldService'),\n deps: ['$injector']\n }\n ]\n})\n\n// Use in Angular\n@Component({...})\nexport class NewComponent {\n constructor(@Inject(OLD_SERVICE) private oldService: any) {\n console.log(this.oldService.getData());\n }\n}\n```\n\n## Routing Migration\n\n```javascript\n// Before: AngularJS routing\nangular.module('myApp').config(function($routeProvider) {\n $routeProvider\n .when('/users', {\n template: '