angular-migration - SKILL

name: angular-migrationdescription: “Master AngularJS to Angular migration, including hybrid apps, component conversion, dependency injection changes, and routing migration.”risk: criticalsource: communitydate_added: “2026-02-27”Angular 迁移掌握从 AngularJS 到 Angular 的迁移包括混合应用、组件转换、依赖注入的变化以及路由迁移。使用此技能时将 AngularJS (1.x) 应用迁移到 Angular (2)运行混合 AngularJS/Angular 应用程序将指令转换为组件现代化依赖注入迁移路由系统更新到最新的 Angular 版本实施 Angular 最佳实践使用此技能时请勿你不是从 AngularJS 迁移到 Angular该应用已经使用现代的 Angular 版本你只需要一个小的UI修复而无需更改框架说明评估 AngularJS 代码库、依赖关系和迁移风险。选择迁移策略混合与重写并定义里程碑。设置 ngUpgrade 并迁移模块、组件和路由。通过测试进行验证并计划安全切换。安全避免没有回滚和阶段验证的大规模切换。在增量迁移过程中保持混合兼容性测试。迁移策略1. 宇宙大爆炸完整重写用 Angular 重写整个应用并行开发立刻切换**适合对象**小型应用程序新建项目2. 增量式混合方法同时运行 AngularJS 和 Angular逐个功能迁移用于互操作的 ngUpgrade适合对象:大型应用程序持续交付3. 垂直切片完全迁移一个功能Angular 中的新功能AngularJS 中的旧功能保持不变逐渐替换适合:中型应用独特功能混合应用设置// main.ts - Bootstrap hybrid appimport{platformBrowserDynamic}fromangular/platform-browser-dynamic;import{UpgradeModule}fromangular/upgrade/static;import{AppModule}from./app/app.module;platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef{constupgradeplatformRef.injector.get(UpgradeModule);// Bootstrap AngularJSupgrade.bootstrap(document.body,[myAngularJSApp],{strictDi:true});});// app.module.tsimport{NgModule}fromangular/core;import{BrowserModule}fromangular/platform-browser;import{UpgradeModule}fromangular/upgrade/static;NgModule({imports:[BrowserModule,UpgradeModule]})exportclassAppModule{constructor(privateupgrade:UpgradeModule){}ngDoBootstrap(){// Bootstrapped manually in main.ts}}组件迁移AngularJS 控制器 → Angular 组件// Before: AngularJS controllerangular.module(myApp).controller(UserController,function($scope,UserService){$scope.user{};$scope.loadUserfunction(id){UserService.getUser(id).then(function(user){$scope.useruser;});};$scope.saveUserfunction(){UserService.saveUser($scope.user);};});// After: Angular componentimport{Component,OnInit}fromangular/core;import{UserService}from./user.service;Component({selector:app-user,template:div h2{{ user.name }}/h2 button (click)saveUser()Save/button /div})exportclassUserComponentimplementsOnInit{user:any{};constructor(privateuserService:UserService){}ngOnInit(){this.loadUser(1);}loadUser(id:number){this.userService.getUser(id).subscribe(user{this.useruser;});}saveUser(){this.userService.saveUser(this.user);}}AngularJS 指令 → Angular 组件// Before: AngularJS directiveangular.module(myApp).directive(userCard,function(){return{restrict:E,scope:{user:,onDelete:},template:div classcard h3{{ user.name }}/h3 button ng-clickonDelete()Delete/button /div};});// After: Angular componentimport{Component,Input,Output,EventEmitter}fromangular/core;Component({selector:app-user-card,template:div classcard h3{{ user.name }}/h3 button (click)delete.emit()Delete/button /div})exportclassUserCardComponent{Input()user:any;Output()deletenewEventEmittervoid();}// Usage: app-user-card [user]user (delete)handleDelete()/app-user-card服务迁移// Before: AngularJS serviceangular.module(myApp).factory(UserService,function($http){return{getUser:function(id){return$http.get(/api/users/id);},saveUser:function(user){return$http.post(/api/users,user);}};});// After: Angular serviceimport{Injectable}fromangular/core;import{HttpClient}fromangular/common/http;import{Observable}fromrxjs;Injectable({providedIn:root})exportclassUserService{constructor(privatehttp:HttpClient){}getUser(id:number):Observableany{returnthis.http.get(/api/users/${id});}saveUser(user:any):Observableany{returnthis.http.post(/api/users,user);}}依赖注入更改将 Angular 降级 → AngularJS// Angular serviceimport{Injectable}fromangular/core;Injectable({providedIn:root})exportclassNewService{getData(){returndata from Angular;}}// Make available to AngularJSimport{downgradeInjectable}fromangular/upgrade/static;angular.module(myApp).factory(newService,downgradeInjectable(NewService));// Use in AngularJSangular.module(myApp).controller(OldController,function(newService){console.log(newService.getData());});升级 AngularJS → Angular// AngularJS serviceangular.module(myApp).factory(oldService,function(){return{getData:function(){returndata from AngularJS;}};});// Make available to Angularimport{InjectionToken}fromangular/core;exportconstOLD_SERVICEnewInjectionTokenany(oldService);NgModule({providers:[{provide:OLD_SERVICE,useFactory:(i:any)i.get(oldService),deps:[$injector]}]})// Use in AngularComponent({...})exportclassNewComponent{constructor(Inject(OLD_SERVICE)privateoldService:any){console.log(this.oldService.getData());}}路由迁移// Before: AngularJS routingangular.module(myApp).config(function($routeProvider){$routeProvider.when(/users,{template:user-list/user-list}).when(/users/:id,{template:user-detail/user-detail});});// After: Angular routingimport{NgModule}fromangular/core;import{RouterModule,Routes}fromangular/router;constroutes:Routes[{path:users,component:UserListComponent},{path:users/:id,component:UserDetailComponent}];NgModule({imports:[RouterModule.forRoot(routes)],exports:[RouterModule]})exportclassAppRoutingModule{}表单迁移!-- Before: AngularJS --formnameuserFormng-submitsaveUser()inputtypetextng-modeluser.namerequiredinputtypeemailng-modeluser.emailrequiredbuttonng-disableduserForm.$invalidSave/button/form// After: Angular (Template-driven)Component({template:form #userFormngForm (ngSubmit)saveUser() input typetext [(ngModel)]user.name namename required input typeemail [(ngModel)]user.email nameemail required button [disabled]userForm.invalidSave/button /form})// Or Reactive Forms (preferred)import{FormBuilder,FormGroup,Validators}fromangular/forms;Component({template:form [formGroup]userForm (ngSubmit)saveUser() input formControlNamename input formControlNameemail button [disabled]userForm.invalidSave/button /form})exportclassUserFormComponent{userForm:FormGroup;constructor(privatefb:FormBuilder){this.userFormthis.fb.group({name:[,Validators.required],email:[,[Validators.required,Validators.email]]});}saveUser(){console.log(this.userForm.value);}}迁移时间表Phase 1: Setup (1-2 weeks) - Install Angular CLI - Set up hybrid app - Configure build tools - Set up testing Phase 2: Infrastructure (2-4 weeks) - Migrate services - Migrate utilities - Set up routing - Migrate shared components Phase 3: Feature Migration (varies) - Migrate feature by feature - Test thoroughly - Deploy incrementally Phase 4: Cleanup (1-2 weeks) - Remove AngularJS code - Remove ngUpgrade - Optimize bundle - Final testing资源references/hybrid-mode.md混合应用模式references/component-migration.md组件转换指南references/dependency-injection.md: 依赖注入迁移策略references/routing.md路由迁移assets/hybrid-bootstrap.ts混合应用模板assets/migration-timeline.md: 项目规划scripts/analyze-angular-app.sh应用分析脚本最佳实践从服务开始先迁移服务更容易增量方法逐个功能迁移持续测试在每一步进行测试使用 TypeScript尽早迁移到 TypeScript遵循风格指南从第一天起遵循 Angular 风格指南稍后优化先让它运行然后再优化文档保留迁移笔记常见陷阱未正确设置混合应用在逻辑之前迁移界面忽略变更检测差异未正确处理范围混合模式AngularJS Angular测试不足限制仅当任务明确符合上述描述的范围时才使用此技能。不要将输出视为环境特定验证、测试或专家审查的替代品。如果缺少所需的输入、权限、安全界限或成功标准请停下来并要求澄清。