[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M7155T3CMNTABW8KFZXVKEF3":3,"skill-same:01M7155T3CMNTABW8KFZXVKEF3":62},{"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":36,"linkOnly":37,"markdownContent":38,"markdownBody":39,"frontMatter":40,"refName":42,"commitSha":43,"skillDirectory":44,"forksCount":14,"repositoryHtmlUrl":45,"repositoryHomepageUrl":6,"ownerHtmlUrl":46,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":47,"install":48,"resources":61},"01M7155T3CMNTABW8KFZXVKEF3","angular-migration",null,"Master AngularJS to Angular migration, including hybrid apps, component conversion, dependency injection changes, and routing migration.","sapsapshen\u002Fai-memory-router","sapsapshen","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F20347959?v=4","01M6XDQEF1DP50DKF37H81J3J5","shenmian","01M6XDQEJPE41Y3DT2763X8ZJN",0,"MIT","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fcursor\u002Fangular-migration\u002FSKILL.md",[],[19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35],"angular","migration","angular migration","2026","component","hybrid","unknown","changes","apps","hybrid apps","dependency injection","community","master","conversion","dependency","injection","routing","2026-11-10 10:12:30",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","# 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",{"name":5,"risk":25,"source":30,"date_added":41,"description":7},"2026-02-27","main","7a38d8e7073e61c16eda85681cb32fb68a8657a5","skills-store\u002Fcursor\u002Fangular-migration","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router","https:\u002F\u002Fgithub.com\u002Fsapsapshen","2026-04-14 21:12:12",{"source":8,"skillName":5,"commands":49,"prompt":59,"zipAvailable":60},[50,53,56],{"tool":51,"command":52},"npx","npx skills add sapsapshen\u002Fai-memory-router --skill angular-migration",{"tool":54,"command":55},"bunx","bunx skills add sapsapshen\u002Fai-memory-router --skill angular-migration",{"tool":57,"command":58},"pnpm","pnpm dlx skills add sapsapshen\u002Fai-memory-router --skill angular-migration","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fcursor\u002Fangular-migration\u002FSKILL.md",true,[],[63,87,113,123,136,155],{"skillNo":64,"name":65,"nameZh":6,"description":66,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":67,"categories":68,"keywords":74,"publishedAt":36},"01M71ATQRKG48SH06FQ697T5G9","wechat-search","Search WeChat Official Account articles using OpenClaw's web search and fetch capabilities with compliance-focused design.","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fopenclaw\u002Fwechat-search-release\u002FSKILL.md",[69],{"categoryNo":70,"categoryName":71,"taxonomyType":72,"taxonomyTypeDesc":73},"01JBSEEDCAT000000000000037","律师与法务","PROFESSION","适用职业",[75,76,77,78,79,80,81,82,83,84,85,86],"wechat search","wechat","search","capabilities","openclaw","design","web search","compliance","web","official","fetch","with",{"skillNo":88,"name":89,"nameZh":6,"description":90,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":91,"categories":92,"keywords":93,"publishedAt":36},"01M71ATNAVGZB35PFYM2GC5N00","trend-tap","Real-time trending topics aggregator across 7 platforms (X\u002FTwitter, Reddit, Google Trends, Hacker News, Zhihu, Bilibili, Weibo). Trigger: when user says 'trend', 'trends', 'trend tap', '热点', '热搜', or asks what is trending\u002Fhot. Do NOT use web_search — this skill already fetches live data from all platforms with zero API keys.","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fopenclaw\u002Ftrend-tap\u002FSKILL.md",[],[94,95,96,97,98,99,77,100,101,102,103,104,105,106,107,108,109,110,111,112],"trend","trend tap","tap","api keys","Bash","time","trending","hacker","aggregator","do","when","brew","live","data","google","install","read","across","api",{"skillNo":114,"name":115,"nameZh":6,"description":116,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":117,"categories":118,"keywords":119,"publishedAt":36},"01M71ATJ9AM5KM15AA8PS302EB","trend-radar","Real-time trending topics aggregator across 7 platforms (X\u002FTwitter, Reddit, Google Trends, Hacker News, Zhihu, Bilibili, Weibo). Trigger: when user says 'trend', 'trends', 'trend pulse', '热点', '热搜', or asks what is trending\u002Fhot. Do NOT use web_search — this skill already fetches live data from all platforms with zero API keys.","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fopenclaw\u002Ftrend-radar\u002FSKILL.md",[],[120,121,94,105,106,107,108,98,77,110,122,111,112,104,102,101,100,109,99,97],"trend radar","radar","pulse",{"skillNo":124,"name":125,"nameZh":6,"description":126,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":127,"categories":128,"keywords":129,"publishedAt":36},"01M71ATGF095N3EJM9G8SD0BB5","tech-news-daily","每日科技新闻汇——从全球多个 RSS 源抓取最新科技新闻，翻译（英→中）、去重、排版成每日简报。当用户询问科技新闻、科技新鲜事、每日科技、技术动态、Daily Tech News 或类似表达时触发此技能。","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fopenclaw\u002Ftech-news-daily\u002FSKILL.md",[],[130,131,132,133,134,135],"news","tech","tech news daily","daily","rss","翻译",{"skillNo":137,"name":138,"nameZh":6,"description":139,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":140,"categories":141,"keywords":147,"publishedAt":36},"01M71ATFAEAMQ17M70NQNY7SR8","summarize","Summarize URLs or files with the summarize CLI (web, PDFs, images, audio, YouTube).","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fopenclaw\u002Fsummarize\u002FSKILL.md",[142],{"categoryNo":143,"categoryName":144,"taxonomyType":145,"taxonomyTypeDesc":146},"01JBSEEDCAT000000000000021","资料检索与研究","SCENARIO","使用场景",[138,83,148,149,150,86,105,151,152,153,96,154,109],"Audio","cli","youtube","images","https","files","pdfs",{"skillNo":156,"name":157,"nameZh":6,"description":158,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":159,"categories":160,"keywords":161,"publishedAt":36},"01M71ATDNS3R0M4H936PACQAWZ","sonoscli","Control Sonos speakers (discover\u002Fstatus\u002Fplay\u002Fvolume\u002Fgroup).","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fopenclaw\u002Fsonoscli\u002FSKILL.md",[],[157,162,163,164,109,165,152,166,167,168,169,170],"status","play","go","latest","github","discover","control","cmd","volume"]