[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M784DF3DNETBN08YECZ8NFN0":3,"skill-same:01M784DF3DNETBN08YECZ8NFN0":50},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":18,"publishedAt":19,"linkOnly":20,"markdownContent":21,"markdownBody":22,"frontMatter":23,"refName":27,"commitSha":28,"skillDirectory":29,"forksCount":30,"repositoryHtmlUrl":31,"repositoryHomepageUrl":32,"ownerHtmlUrl":33,"ownerBlogUrl":6,"ownerDescription":34,"updatedAt":35,"install":36,"resources":49},"01M784DF3DNETBN08YECZ8NFN0","angular-migration",null,"Master AngularJS to Angular migration, including hybrid apps, component conversion, dependency injection changes, and routing migration.","Lord1Egypt\u002Fawesome-skill-forge","Lord1Egypt","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F99746359?v=4","01M7592YDNT0XK9WJ0T2MQVPDN","Mohamed Mounir Ali AL Keshita","01M75GRFNHC8VZNWEB8DKDE433",3,"MIT","https:\u002F\u002Fgithub.com\u002FLord1Egypt\u002Fawesome-skill-forge\u002Fblob\u002Fmaster\u002Fcommunity\u002Fskills_sh\u002Fs\u002Fskills-sh_sickn33_antigravity-awesome-skills_angular-migration\u002FSKILL.md",[],[],"2026-11-15 14:19:17",false,"---\nname: angular-migration\ndescription: \"Master AngularJS to Angular migration, including hybrid apps, component conversion, dependency injection changes, and routing migration.\"\nrisk: unknown\nsource: community\ndate_added: \"2026-02-27\"\n---\n\n# 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\u002FAngular 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\u002F\u002F main.ts - Bootstrap hybrid app\nimport { platformBrowserDynamic } from '@angular\u002Fplatform-browser-dynamic';\nimport { UpgradeModule } from '@angular\u002Fupgrade\u002Fstatic';\nimport { AppModule } from '.\u002Fapp\u002Fapp.module';\n\nplatformBrowserDynamic()\n  .bootstrapModule(AppModule)\n  .then(platformRef => {\n    const upgrade = platformRef.injector.get(UpgradeModule);\n    \u002F\u002F Bootstrap AngularJS\n    upgrade.bootstrap(document.body, ['myAngularJSApp'], { strictDi: true });\n  });\n```\n\n```typescript\n\u002F\u002F app.module.ts\nimport { NgModule } from '@angular\u002Fcore';\nimport { BrowserModule } from '@angular\u002Fplatform-browser';\nimport { UpgradeModule } from '@angular\u002Fupgrade\u002Fstatic';\n\n@NgModule({\n  imports: [\n    BrowserModule,\n    UpgradeModule\n  ]\n})\nexport class AppModule {\n  constructor(private upgrade: UpgradeModule) {}\n\n  ngDoBootstrap() {\n    \u002F\u002F Bootstrapped manually in main.ts\n  }\n}\n```\n\n## Component Migration\n\n### AngularJS Controller → Angular Component\n```javascript\n\u002F\u002F 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\u002F\u002F After: Angular component\nimport { Component, OnInit } from '@angular\u002Fcore';\nimport { UserService } from '.\u002Fuser.service';\n\n@Component({\n  selector: 'app-user',\n  template: `\n    \u003Cdiv>\n      \u003Ch2>{{ user.name }}\u003C\u002Fh2>\n      \u003Cbutton (click)=\"saveUser()\">Save\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\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\u002F\u002F Before: AngularJS directive\nangular.module('myApp').directive('userCard', function() {\n  return {\n    restrict: 'E',\n    scope: {\n      user: '=',\n      onDelete: '&'\n    },\n    template: `\n      \u003Cdiv class=\"card\">\n        \u003Ch3>{{ user.name }}\u003C\u002Fh3>\n        \u003Cbutton ng-click=\"onDelete()\">Delete\u003C\u002Fbutton>\n      \u003C\u002Fdiv>\n    `\n  };\n});\n```\n\n```typescript\n\u002F\u002F After: Angular component\nimport { Component, Input, Output, EventEmitter } from '@angular\u002Fcore';\n\n@Component({\n  selector: 'app-user-card',\n  template: `\n    \u003Cdiv class=\"card\">\n      \u003Ch3>{{ user.name }}\u003C\u002Fh3>\n      \u003Cbutton (click)=\"delete.emit()\">Delete\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n  `\n})\nexport class UserCardComponent {\n  @Input() user: any;\n  @Output() delete = new EventEmitter\u003Cvoid>();\n}\n\n\u002F\u002F Usage: \u003Capp-user-card [user]=\"user\" (delete)=\"handleDelete()\">\u003C\u002Fapp-user-card>\n```\n\n## Service Migration\n\n```javascript\n\u002F\u002F Before: AngularJS service\nangular.module('myApp').factory('UserService', function($http) {\n  return {\n    getUser: function(id) {\n      return $http.get('\u002Fapi\u002Fusers\u002F' + id);\n    },\n    saveUser: function(user) {\n      return $http.post('\u002Fapi\u002Fusers', user);\n    }\n  };\n});\n```\n\n```typescript\n\u002F\u002F After: Angular service\nimport { Injectable } from '@angular\u002Fcore';\nimport { HttpClient } from '@angular\u002Fcommon\u002Fhttp';\nimport { Observable } from 'rxjs';\n\n@Injectable({\n  providedIn: 'root'\n})\nexport class UserService {\n  constructor(private http: HttpClient) {}\n\n  getUser(id: number): Observable\u003Cany> {\n    return this.http.get(`\u002Fapi\u002Fusers\u002F${id}`);\n  }\n\n  saveUser(user: any): Observable\u003Cany> {\n    return this.http.post('\u002Fapi\u002Fusers', user);\n  }\n}\n```\n\n## Dependency Injection Changes\n\n### Downgrading Angular → AngularJS\n```typescript\n\u002F\u002F Angular service\nimport { Injectable } from '@angular\u002Fcore';\n\n@Injectable({ providedIn: 'root' })\nexport class NewService {\n  getData() {\n    return 'data from Angular';\n  }\n}\n\n\u002F\u002F Make available to AngularJS\nimport { downgradeInjectable } from '@angular\u002Fupgrade\u002Fstatic';\n\nangular.module('myApp')\n  .factory('newService', downgradeInjectable(NewService));\n\n\u002F\u002F 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\u002F\u002F AngularJS service\nangular.module('myApp').factory('oldService', function() {\n  return {\n    getData: function() {\n      return 'data from AngularJS';\n    }\n  };\n});\n\n\u002F\u002F Make available to Angular\nimport { InjectionToken } from '@angular\u002Fcore';\n\nexport const OLD_SERVICE = new InjectionToken\u003Cany>('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\u002F\u002F 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\u002F\u002F Before: AngularJS routing\nangular.module('myApp').config(function($routeProvider) {\n  $routeProvider\n    .when('\u002Fusers', {\n      template: '\u003Cuser-list>\u003C\u002Fuser-list>'\n    })\n    .when('\u002Fusers\u002F:id', {\n      template: '\u003Cuser-detail>\u003C\u002Fuser-detail>'\n    });\n});\n```\n\n```typescript\n\u002F\u002F After: Angular routing\nimport { NgModule } from '@angular\u002Fcore';\nimport { RouterModule, Routes } from '@angular\u002Frouter';\n\nconst routes: Routes = [\n  { path: 'users', component: UserListComponent },\n  { path: 'users\u002F:id', component: UserDetailComponent }\n];\n\n@NgModule({\n  imports: [RouterModule.forRoot(routes)],\n  exports: [RouterModule]\n})\nexport class AppRoutingModule {}\n```\n\n## Forms Migration\n\n```html\n\u003C!-- Before: AngularJS -->\n\u003Cform name=\"userForm\" ng-submit=\"saveUser()\">\n  \u003Cinput type=\"text\" ng-model=\"user.name\" required>\n  \u003Cinput type=\"email\" ng-model=\"user.email\" required>\n  \u003Cbutton ng-disabled=\"userForm.$invalid\">Save\u003C\u002Fbutton>\n\u003C\u002Fform>\n```\n\n```typescript\n\u002F\u002F After: Angular (Template-driven)\n@Component({\n  template: `\n    \u003Cform #userForm=\"ngForm\" (ngSubmit)=\"saveUser()\">\n      \u003Cinput type=\"text\" [(ngModel)]=\"user.name\" name=\"name\" required>\n      \u003Cinput type=\"email\" [(ngModel)]=\"user.email\" name=\"email\" required>\n      \u003Cbutton [disabled]=\"userForm.invalid\">Save\u003C\u002Fbutton>\n    \u003C\u002Fform>\n  `\n})\n\n\u002F\u002F Or Reactive Forms (preferred)\nimport { FormBuilder, FormGroup, Validators } from '@angular\u002Fforms';\n\n@Component({\n  template: `\n    \u003Cform [formGroup]=\"userForm\" (ngSubmit)=\"saveUser()\">\n      \u003Cinput formControlName=\"name\">\n      \u003Cinput formControlName=\"email\">\n      \u003Cbutton [disabled]=\"userForm.invalid\">Save\u003C\u002Fbutton>\n    \u003C\u002Fform>\n  `\n})\nexport class UserFormComponent {\n  userForm: FormGroup;\n\n  constructor(private fb: FormBuilder) {\n    this.userForm = this.fb.group({\n      name: ['', Validators.required],\n      email: ['', [Validators.required, Validators.email]]\n    });\n  }\n\n  saveUser() {\n    console.log(this.userForm.value);\n  }\n}\n```\n\n## Migration Timeline\n\n```\nPhase 1: Setup (1-2 weeks)\n- Install Angular CLI\n- Set up hybrid app\n- Configure build tools\n- Set up testing\n\nPhase 2: Infrastructure (2-4 weeks)\n- Migrate services\n- Migrate utilities\n- Set up routing\n- Migrate shared components\n\nPhase 3: Feature Migration (varies)\n- Migrate feature by feature\n- Test thoroughly\n- Deploy incrementally\n\nPhase 4: Cleanup (1-2 weeks)\n- Remove AngularJS code\n- Remove ngUpgrade\n- Optimize bundle\n- Final testing\n```\n\n## Resources\n\n- **references\u002Fhybrid-mode.md**: Hybrid app patterns\n- **references\u002Fcomponent-migration.md**: Component conversion guide\n- **references\u002Fdependency-injection.md**: DI migration strategies\n- **references\u002Frouting.md**: Routing migration\n- **assets\u002Fhybrid-bootstrap.ts**: Hybrid app template\n- **assets\u002Fmigration-timeline.md**: Project planning\n- **scripts\u002Fanalyze-angular-app.sh**: App analysis script\n\n## Best Practices\n\n1. **Start with Services**: Migrate services first (easier)\n2. **Incremental Approach**: Feature-by-feature migration\n3. **Test Continuously**: Test at every step\n4. **Use TypeScript**: Migrate to TypeScript early\n5. **Follow Style Guide**: Angular style guide from day 1\n6. **Optimize Later**: Get it working, then optimize\n7. **Document**: Keep migration notes\n\n## Common Pitfalls\n\n- Not setting up hybrid app correctly\n- Migrating UI before logic\n- Ignoring change detection differences\n- Not handling scope properly\n- Mixing patterns (AngularJS + Angular)\n- Inadequate testing\n\n## Limitations\n- Use this skill only when the task clearly matches the scope described above.\n- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.\n- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.\n","# 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\u002FAngular 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\u002F\u002F main.ts - Bootstrap hybrid app\nimport { platformBrowserDynamic } from '@angular\u002Fplatform-browser-dynamic';\nimport { UpgradeModule } from '@angular\u002Fupgrade\u002Fstatic';\nimport { AppModule } from '.\u002Fapp\u002Fapp.module';\n\nplatformBrowserDynamic()\n  .bootstrapModule(AppModule)\n  .then(platformRef => {\n    const upgrade = platformRef.injector.get(UpgradeModule);\n    \u002F\u002F Bootstrap AngularJS\n    upgrade.bootstrap(document.body, ['myAngularJSApp'], { strictDi: true });\n  });\n```\n\n```typescript\n\u002F\u002F app.module.ts\nimport { NgModule } from '@angular\u002Fcore';\nimport { BrowserModule } from '@angular\u002Fplatform-browser';\nimport { UpgradeModule } from '@angular\u002Fupgrade\u002Fstatic';\n\n@NgModule({\n  imports: [\n    BrowserModule,\n    UpgradeModule\n  ]\n})\nexport class AppModule {\n  constructor(private upgrade: UpgradeModule) {}\n\n  ngDoBootstrap() {\n    \u002F\u002F Bootstrapped manually in main.ts\n  }\n}\n```\n\n## Component Migration\n\n### AngularJS Controller → Angular Component\n```javascript\n\u002F\u002F 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\u002F\u002F After: Angular component\nimport { Component, OnInit } from '@angular\u002Fcore';\nimport { UserService } from '.\u002Fuser.service';\n\n@Component({\n  selector: 'app-user',\n  template: `\n    \u003Cdiv>\n      \u003Ch2>{{ user.name }}\u003C\u002Fh2>\n      \u003Cbutton (click)=\"saveUser()\">Save\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\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\u002F\u002F Before: AngularJS directive\nangular.module('myApp').directive('userCard', function() {\n  return {\n    restrict: 'E',\n    scope: {\n      user: '=',\n      onDelete: '&'\n    },\n    template: `\n      \u003Cdiv class=\"card\">\n        \u003Ch3>{{ user.name }}\u003C\u002Fh3>\n        \u003Cbutton ng-click=\"onDelete()\">Delete\u003C\u002Fbutton>\n      \u003C\u002Fdiv>\n    `\n  };\n});\n```\n\n```typescript\n\u002F\u002F After: Angular component\nimport { Component, Input, Output, EventEmitter } from '@angular\u002Fcore';\n\n@Component({\n  selector: 'app-user-card',\n  template: `\n    \u003Cdiv class=\"card\">\n      \u003Ch3>{{ user.name }}\u003C\u002Fh3>\n      \u003Cbutton (click)=\"delete.emit()\">Delete\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n  `\n})\nexport class UserCardComponent {\n  @Input() user: any;\n  @Output() delete = new EventEmitter\u003Cvoid>();\n}\n\n\u002F\u002F Usage: \u003Capp-user-card [user]=\"user\" (delete)=\"handleDelete()\">\u003C\u002Fapp-user-card>\n```\n\n## Service Migration\n\n```javascript\n\u002F\u002F Before: AngularJS service\nangular.module('myApp').factory('UserService', function($http) {\n  return {\n    getUser: function(id) {\n      return $http.get('\u002Fapi\u002Fusers\u002F' + id);\n    },\n    saveUser: function(user) {\n      return $http.post('\u002Fapi\u002Fusers', user);\n    }\n  };\n});\n```\n\n```typescript\n\u002F\u002F After: Angular service\nimport { Injectable } from '@angular\u002Fcore';\nimport { HttpClient } from '@angular\u002Fcommon\u002Fhttp';\nimport { Observable } from 'rxjs';\n\n@Injectable({\n  providedIn: 'root'\n})\nexport class UserService {\n  constructor(private http: HttpClient) {}\n\n  getUser(id: number): Observable\u003Cany> {\n    return this.http.get(`\u002Fapi\u002Fusers\u002F${id}`);\n  }\n\n  saveUser(user: any): Observable\u003Cany> {\n    return this.http.post('\u002Fapi\u002Fusers', user);\n  }\n}\n```\n\n## Dependency Injection Changes\n\n### Downgrading Angular → AngularJS\n```typescript\n\u002F\u002F Angular service\nimport { Injectable } from '@angular\u002Fcore';\n\n@Injectable({ providedIn: 'root' })\nexport class NewService {\n  getData() {\n    return 'data from Angular';\n  }\n}\n\n\u002F\u002F Make available to AngularJS\nimport { downgradeInjectable } from '@angular\u002Fupgrade\u002Fstatic';\n\nangular.module('myApp')\n  .factory('newService', downgradeInjectable(NewService));\n\n\u002F\u002F 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\u002F\u002F AngularJS service\nangular.module('myApp').factory('oldService', function() {\n  return {\n    getData: function() {\n      return 'data from AngularJS';\n    }\n  };\n});\n\n\u002F\u002F Make available to Angular\nimport { InjectionToken } from '@angular\u002Fcore';\n\nexport const OLD_SERVICE = new InjectionToken\u003Cany>('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\u002F\u002F 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\u002F\u002F Before: AngularJS routing\nangular.module('myApp').config(function($routeProvider) {\n  $routeProvider\n    .when('\u002Fusers', {\n      template: '\u003Cuser-list>\u003C\u002Fuser-list>'\n    })\n    .when('\u002Fusers\u002F:id', {\n      template: '\u003Cuser-detail>\u003C\u002Fuser-detail>'\n    });\n});\n```\n\n```typescript\n\u002F\u002F After: Angular routing\nimport { NgModule } from '@angular\u002Fcore';\nimport { RouterModule, Routes } from '@angular\u002Frouter';\n\nconst routes: Routes = [\n  { path: 'users', component: UserListComponent },\n  { path: 'users\u002F:id', component: UserDetailComponent }\n];\n\n@NgModule({\n  imports: [RouterModule.forRoot(routes)],\n  exports: [RouterModule]\n})\nexport class AppRoutingModule {}\n```\n\n## Forms Migration\n\n```html\n\u003C!-- Before: AngularJS -->\n\u003Cform name=\"userForm\" ng-submit=\"saveUser()\">\n  \u003Cinput type=\"text\" ng-model=\"user.name\" required>\n  \u003Cinput type=\"email\" ng-model=\"user.email\" required>\n  \u003Cbutton ng-disabled=\"userForm.$invalid\">Save\u003C\u002Fbutton>\n\u003C\u002Fform>\n```\n\n```typescript\n\u002F\u002F After: Angular (Template-driven)\n@Component({\n  template: `\n    \u003Cform #userForm=\"ngForm\" (ngSubmit)=\"saveUser()\">\n      \u003Cinput type=\"text\" [(ngModel)]=\"user.name\" name=\"name\" required>\n      \u003Cinput type=\"email\" [(ngModel)]=\"user.email\" name=\"email\" required>\n      \u003Cbutton [disabled]=\"userForm.invalid\">Save\u003C\u002Fbutton>\n    \u003C\u002Fform>\n  `\n})\n\n\u002F\u002F Or Reactive Forms (preferred)\nimport { FormBuilder, FormGroup, Validators } from '@angular\u002Fforms';\n\n@Component({\n  template: `\n    \u003Cform [formGroup]=\"userForm\" (ngSubmit)=\"saveUser()\">\n      \u003Cinput formControlName=\"name\">\n      \u003Cinput formControlName=\"email\">\n      \u003Cbutton [disabled]=\"userForm.invalid\">Save\u003C\u002Fbutton>\n    \u003C\u002Fform>\n  `\n})\nexport class UserFormComponent {\n  userForm: FormGroup;\n\n  constructor(private fb: FormBuilder) {\n    this.userForm = this.fb.group({\n      name: ['', Validators.required],\n      email: ['', [Validators.required, Validators.email]]\n    });\n  }\n\n  saveUser() {\n    console.log(this.userForm.value);\n  }\n}\n```\n\n## Migration Timeline\n\n```\nPhase 1: Setup (1-2 weeks)\n- Install Angular CLI\n- Set up hybrid app\n- Configure build tools\n- Set up testing\n\nPhase 2: Infrastructure (2-4 weeks)\n- Migrate services\n- Migrate utilities\n- Set up routing\n- Migrate shared components\n\nPhase 3: Feature Migration (varies)\n- Migrate feature by feature\n- Test thoroughly\n- Deploy incrementally\n\nPhase 4: Cleanup (1-2 weeks)\n- Remove AngularJS code\n- Remove ngUpgrade\n- Optimize bundle\n- Final testing\n```\n\n## Resources\n\n- **references\u002Fhybrid-mode.md**: Hybrid app patterns\n- **references\u002Fcomponent-migration.md**: Component conversion guide\n- **references\u002Fdependency-injection.md**: DI migration strategies\n- **references\u002Frouting.md**: Routing migration\n- **assets\u002Fhybrid-bootstrap.ts**: Hybrid app template\n- **assets\u002Fmigration-timeline.md**: Project planning\n- **scripts\u002Fanalyze-angular-app.sh**: App analysis script\n\n## Best Practices\n\n1. **Start with Services**: Migrate services first (easier)\n2. **Incremental Approach**: Feature-by-feature migration\n3. **Test Continuously**: Test at every step\n4. **Use TypeScript**: Migrate to TypeScript early\n5. **Follow Style Guide**: Angular style guide from day 1\n6. **Optimize Later**: Get it working, then optimize\n7. **Document**: Keep migration notes\n\n## Common Pitfalls\n\n- Not setting up hybrid app correctly\n- Migrating UI before logic\n- Ignoring change detection differences\n- Not handling scope properly\n- Mixing patterns (AngularJS + Angular)\n- Inadequate testing\n\n## Limitations\n- Use this skill only when the task clearly matches the scope described above.\n- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.\n- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.\n",{"name":5,"risk":24,"source":25,"date_added":26,"description":7},"unknown","community","2026-02-27","master","4aa004da461d820f4ea5499e58eb8d196cf99016","community\u002Fskills_sh\u002Fs\u002Fskills-sh_sickn33_antigravity-awesome-skills_angular-migration",0,"https:\u002F\u002Fgithub.com\u002FLord1Egypt\u002Fawesome-skill-forge","https:\u002F\u002Fskill-explorer-rho.vercel.app","https:\u002F\u002Fgithub.com\u002FLord1Egypt","Unbreakable. Unstoppable. Unmatched⚡.\r\n Speaker of machine tongues 🤖  | World-builder of decentralized dreams 🌐 | Defender of the digital realm🛡️.","2026-06-10 08:21:01",{"source":8,"skillName":5,"commands":37,"prompt":47,"zipAvailable":48},[38,41,44],{"tool":39,"command":40},"npx","npx skills add Lord1Egypt\u002Fawesome-skill-forge --skill angular-migration",{"tool":42,"command":43},"bunx","bunx skills add Lord1Egypt\u002Fawesome-skill-forge --skill angular-migration",{"tool":45,"command":46},"pnpm","pnpm dlx skills add Lord1Egypt\u002Fawesome-skill-forge --skill angular-migration","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FLord1Egypt\u002Fawesome-skill-forge\u002Fblob\u002Fmaster\u002Fcommunity\u002Fskills_sh\u002Fs\u002Fskills-sh_sickn33_antigravity-awesome-skills_angular-migration\u002FSKILL.md",true,[],[51,58,65,72,79,86],{"skillNo":52,"name":53,"nameZh":6,"description":54,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":55,"categories":56,"keywords":57,"publishedAt":19},"01M785WKJB99G3STR1NF9NRTJW","youtube-content","YouTube transcripts to summaries, threads, blogs.","https:\u002F\u002Fgithub.com\u002FLord1Egypt\u002Fawesome-skill-forge\u002Fblob\u002Fmaster\u002Fskills\u002Fyoutube-content\u002FSKILL.md",[],[],{"skillNo":59,"name":60,"nameZh":6,"description":61,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":62,"categories":63,"keywords":64,"publishedAt":19},"01M785WEFHB0G2S9YA6EPR3H0E","xurl","X\u002FTwitter via xurl CLI: post, search, DM, media, v2 API.","https:\u002F\u002Fgithub.com\u002FLord1Egypt\u002Fawesome-skill-forge\u002Fblob\u002Fmaster\u002Fskills\u002Fxurl\u002FSKILL.md",[],[],{"skillNo":66,"name":67,"nameZh":6,"description":68,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":69,"categories":70,"keywords":71,"publishedAt":19},"01M785W98EDN4EFJXJPMQEHCRC","touchdesigner-mcp","Control a running TouchDesigner instance via twozero MCP — create operators, set parameters, wire connections, execute Python, build real-time visuals. 36 native tools.","https:\u002F\u002Fgithub.com\u002FLord1Egypt\u002Fawesome-skill-forge\u002Fblob\u002Fmaster\u002Fskills\u002Ftouchdesigner-mcp\u002FSKILL.md",[],[],{"skillNo":73,"name":74,"nameZh":6,"description":75,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":76,"categories":77,"keywords":78,"publishedAt":19},"01M785W5S9FP3QBH2V191E025P","test-driven-development","TDD: enforce RED-GREEN-REFACTOR, tests before code.","https:\u002F\u002Fgithub.com\u002FLord1Egypt\u002Fawesome-skill-forge\u002Fblob\u002Fmaster\u002Fskills\u002Ftest-driven-development\u002FSKILL.md",[],[],{"skillNo":80,"name":81,"nameZh":6,"description":82,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":83,"categories":84,"keywords":85,"publishedAt":19},"01M785W2AS08NSSH9YATCV6FJB","teams-meeting-pipeline","Operate the Teams meeting summary pipeline via Hermes CLI — summarize meetings, inspect pipeline status, replay jobs, manage Microsoft Graph subscriptions.","https:\u002F\u002Fgithub.com\u002FLord1Egypt\u002Fawesome-skill-forge\u002Fblob\u002Fmaster\u002Fskills\u002Fteams-meeting-pipeline\u002FSKILL.md",[],[],{"skillNo":87,"name":88,"nameZh":6,"description":89,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":90,"categories":91,"keywords":92,"publishedAt":19},"01M785VXKW4T34BTP1SCHW1R7F","systematic-debugging","4-phase root cause debugging: understand bugs before fixing.","https:\u002F\u002Fgithub.com\u002FLord1Egypt\u002Fawesome-skill-forge\u002Fblob\u002Fmaster\u002Fskills\u002Fsystematic-debugging\u002FSKILL.md",[],[]]