---

name: angular-migration description: "掌握 AngularJS 到 Angular 的迁移，包括混合应用、组件转换、依赖注入变更和路由迁移。" risk: unknown source: community date_added: "2026-02-27"

Angular Migration

掌握 AngularJS 到 Angular 的迁移，包括混合应用、组件转换、依赖注入变更和路由迁移。

使用场景

• 将 AngularJS (1.x) 应用迁移到 Angular (2+)
• 运行 AngularJS/Angular 混合应用
• 将指令转换为组件
• 现代化依赖注入
• 迁移路由系统
• 更新到最新 Angular 版本
• 实施 Angular 最佳实践

不适用场景

• 你不是从 AngularJS 迁移到 Angular
• 应用已经在现代 Angular 版本上
• 你只需要一个小的 UI 修复而不涉及框架变更

操作步骤

1. 评估 AngularJS 代码库、依赖项和迁移风险。
2. 选择迁移策略（混合 vs 重写）并定义里程碑。
3. 设置 ngUpgrade 并迁移模块、组件和路由。
4. 通过测试验证并规划安全的切换方案。

安全注意事项

• 避免在没有回滚和预发布验证的情况下进行大爆炸式切换。
• 在增量迁移期间保持混合兼容性测试。

迁移策略

1. 大爆炸式（完全重写）

• 用 Angular 重写整个应用
• 并行开发
• 一次性切换
• 最适合： 小型应用、全新项目

2. 增量式（混合方案）

• AngularJS 和 Angular 并行运行
• 逐功能迁移
• 使用 ngUpgrade 实现互操作
• 最适合： 大型应用、持续交付

3. 垂直切片

• 完整迁移一个功能
• 新功能用 Angular，旧功能保持 AngularJS
• 逐步替换
• 最适合： 中型应用、功能界限清晰的项目

混合应用设置

// main.ts - Bootstrap hybrid app
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { UpgradeModule } from '@angular/upgrade/static';
import { AppModule } from './app/app.module';

platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .then(platformRef => {
    const upgrade = platformRef.injector.get(UpgradeModule);
    // Bootstrap AngularJS
    upgrade.bootstrap(document.body, ['myAngularJSApp'], { strictDi: true });
  });

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { UpgradeModule } from '@angular/upgrade/static';

@NgModule({
  imports: [
    BrowserModule,
    UpgradeModule
  ]
})
export class AppModule {
  constructor(private upgrade: UpgradeModule) {}

  ngDoBootstrap() {
    // Bootstrapped manually in main.ts
  }
}

组件迁移

AngularJS Controller → Angular Component

// Before: AngularJS controller
angular.module('myApp').controller('UserController', function($scope, UserService) {
  $scope.user = {};

  $scope.loadUser = function(id) {
    UserService.getUser(id).then(function(user) {
      $scope.user = user;
    });
  };

  $scope.saveUser = function() {
    UserService.saveUser($scope.user);
  };
});

// After: Angular component
import { Component, OnInit } from '@angular/core';
import { UserService } from './user.service';

@Component({
  selector: 'app-user',
  template: \`
    <div>
      <h2>{{ user.name }}</h2>
      <button (click)="saveUser()">Save</button>
    </div>
  \`
})
export class UserComponent implements OnInit {
  user: any = {};

  constructor(private userService: UserService) {}

  ngOnInit() {
    this.loadUser(1);
  }

  loadUser(id: number) {
    this.userService.getUser(id).subscribe(user => {
      this.user = user;
    });
  }

  saveUser() {
    this.userService.saveUser(this.user);
  }
}

AngularJS Directive → Angular Component

// Before: AngularJS directive
angular.module('myApp').directive('userCard', function() {
  return {
    restrict: 'E',
    scope: {
      user: '=',
      onDelete: '&'
    },
    template: \`
      <div class="card">
        <h3>{{ user.name }}</h3>
        <button ng-click="onDelete()">Delete</button>
      </div>
    \`
  };
});

// After: Angular component
import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-user-card',
  template: \`
    <div class="card">
      <h3>{{ user.name }}</h3>
      <button (click)="delete.emit()">Delete</button>
    </div>
  \`
})
export class UserCardComponent {
  @Input() user: any;
  @Output() delete = new EventEmitter<void>();
}

// Usage: <app-user-card [user]="user" (delete)="handleDelete()"></app-user-card>

服务迁移

// Before: AngularJS service
angular.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 service
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class UserService {
  constructor(private http: HttpClient) {}

  getUser(id: number): Observable<any> {
    return this.http.get(\`/api/users/\${id}\`);
  }

  saveUser(user: any): Observable<any> {
    return this.http.post('/api/users', user);
  }
}