[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6F19Q1BHCCXK0BANNJR92G2":3,"skill-same:01M6F19Q1BHCCXK0BANNJR92G2":69},{"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":35,"linkOnly":36,"markdownContent":37,"markdownBody":38,"frontMatter":39,"refName":40,"commitSha":41,"skillDirectory":42,"forksCount":43,"repositoryHtmlUrl":44,"repositoryHomepageUrl":45,"ownerHtmlUrl":46,"ownerBlogUrl":6,"ownerDescription":47,"updatedAt":48,"install":49,"resources":62},"01M6F19Q1BHCCXK0BANNJR92G2","angular-migration",null,"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.","ComeOnOliver\u002Fskillshub","ComeOnOliver","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F43215937?v=4","01M6E5JNFECJAAVFE0W7SMWWD2","Haoran Shu","01M6E5JNNDQS7AJZDYFQ8TPZCK",67,"MIT","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fwshobson\u002Fangular-migration\u002FSKILL.md",[],[19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34],"angular","migration","angular migration","component","code","planning","framework","injection","applications","migrate","use","dependency","Legacy","migrations","dependency injection","planning framework","2026-11-10 10:12:30",false,"---\nname: angular-migration\ndescription: 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.\n---\n\n# Angular Migration\n\nMaster AngularJS to Angular migration, including hybrid apps, component conversion, dependency injection changes, and routing migration.\n\n## When to Use This Skill\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## 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## When to Use This Skill\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## 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,"description":7},"main","def8531e65114c0fca8fb8551c1871ee0eed705c","skills\u002Faiskillstore\u002Fmarketplace\u002Fwshobson\u002Fangular-migration",24,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub","https:\u002F\u002Fskillshub.wtf","https:\u002F\u002Fgithub.com\u002FComeOnOliver","AI & Blockchain Engineer\r\n","2026-06-24 22:07:19",{"source":8,"skillName":5,"commands":50,"prompt":60,"zipAvailable":61},[51,54,57],{"tool":52,"command":53},"npx","npx skills add ComeOnOliver\u002Fskillshub --skill angular-migration",{"tool":55,"command":56},"bunx","bunx skills add ComeOnOliver\u002Fskillshub --skill angular-migration",{"tool":58,"command":59},"pnpm","pnpm dlx skills add ComeOnOliver\u002Fskillshub --skill angular-migration","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fwshobson\u002Fangular-migration\u002FSKILL.md",true,[63],{"path":64,"resourceType":65,"resourceTypeDesc":66,"sizeBytes":67,"sourceHtmlUrl":68},"skill-report.json","REFERENCE","参考文档",8250,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fwshobson\u002Fangular-migration\u002Fskill-report.json",[70,84,94,103,109,116],{"skillNo":71,"name":72,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":73,"categories":74,"keywords":80,"publishedAt":35},"01M6FKJN13GMG4KY57J3QD8GY5","model-hierarchy-skill","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzscole\u002Fmodel-hierarchy-skill\u002Fmodel-hierarchy-skill\u002FSKILL.md",[75],{"categoryNo":76,"categoryName":77,"taxonomyType":78,"taxonomyTypeDesc":79},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",[81,82,83],"model","model hierarchy","model hierarchy skill",{"skillNo":85,"name":86,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":87,"categories":88,"keywords":90,"publishedAt":35},"01M6FKJJJ6GCAMR4PPPRD12M5X","zoom-mcp","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-mcp\u002FSKILL.md",[89],{"categoryNo":76,"categoryName":77,"taxonomyType":78,"taxonomyTypeDesc":79},[91,92,93],"MCP","zoom","zoom mcp",{"skillNo":95,"name":96,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":97,"categories":98,"keywords":99,"publishedAt":35},"01M6FKJE3KYT3KPEZMEEHYKA6K","zoom-apps-sdk","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-apps-sdk\u002FSKILL.md",[],[100,101,102,92],"sdk","zoom apps sdk","apps",{"skillNo":104,"name":105,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":106,"categories":107,"keywords":108,"publishedAt":35},"01M6FKJ9EDH9Q5VWDF8HAJRSP0","windows","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwindows\u002FSKILL.md",[],[105],{"skillNo":110,"name":111,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":112,"categories":113,"keywords":115,"publishedAt":35},"01M6FKJ666BEEFC3AE9GJ72Q93","whiteboard","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwhiteboard\u002FSKILL.md",[114],{"categoryNo":76,"categoryName":77,"taxonomyType":78,"taxonomyTypeDesc":79},[111],{"skillNo":117,"name":118,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":119,"categories":120,"keywords":121,"publishedAt":35},"01M6FKJ21WFCDGTJQ2Q91T9DVW","websockets","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwebsockets\u002FSKILL.md",[],[118]]