如何将Angular 16集成到现有AngularJS(v1.x)应用？求迁移交互方案

1. 在AngularJS中渲染Angular 16内容的最优方案：官方升级适配器（UpgradeModule） #

这是Angular官方提供的增量迁移工具，支持在AngularJS应用中无缝嵌入Angular组件，性能和交互性远优于iframe，是当前最成熟的集成方案。

实现步骤： #

• 安装依赖：npm install @angular/upgrade --save
• 在Angular 16应用中配置UpgradeModule，启动时同时引导AngularJS应用：

  // app.module.ts
  import { NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { UpgradeModule } from '@angular/upgrade/static';
  import { TargetAngular16Component } from './target.component';
  
  @NgModule({
    imports: [BrowserModule, UpgradeModule],
    declarations: [TargetAngular16Component]
  })
  export class AppModule {
    constructor(private upgrade: UpgradeModule) {}
    ngDoBootstrap() {
      // 引导AngularJS根模块
      this.upgrade.bootstrap(document.body, ['angularJsRootModule'], { strictDi: true });
    }
  }
  

• 将Angular 16组件降级为AngularJS可识别的指令：

  // downgrade-config.ts
  import { downgradeComponent } from '@angular/upgrade/static';
  import { TargetAngular16Component } from './target.component';
  
  angular.module('angularJsRootModule')
    .directive('targetAngular16Component', downgradeComponent({ 
      component: TargetAngular16Component 
    }) as angular.IDirectiveFactory);
  

• 在AngularJS路由匹配时渲染该组件：

  <!-- AngularJS路由模板 -->
  <div ng-if="$state.current.name === 'specific-route'">
    <target-angular16-component></target-angular16-component>
  </div>
  

2. AngularJS与Angular 16间高效的数据传递方法 #

（1）组件输入输出（父子场景） #

在Angular 16组件中定义@Input/@Output，降级后直接在AngularJS模板中绑定：

// target.component.ts
import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'target-angular16-component',
  template: `<form-builder [data]="formData" (save)="onFormSave($event)"></form-builder>`
})
export class TargetAngular16Component {
  @Input() formData: any;
  @Output() save = new EventEmitter<any>();

  onFormSave(data: any) {
    this.save.emit(data);
  }
}

AngularJS模板中绑定数据与事件：

<target-angular16-component 
  form-data="angularJsFormModel" 
  save="handleFormSave($event)"
></target-angular16-component>

（2）跨框架共享服务（全局状态） #

将Angular服务降级给AngularJS使用，或升级AngularJS服务给Angular调用，实现数据同步：

• 降级Angular 16的表单数据服务：

  // form-data.service.ts（Angular 16）
  import { Injectable } from '@angular/core';
  import { BehaviorSubject } from 'rxjs';
  
  @Injectable({ providedIn: 'root' })
  export class FormDataService {
    private formStore = new BehaviorSubject<any>(null);
    formData$ = this.formStore.asObservable();
  
    updateForm(data: any) {
      this.formStore.next(data);
    }
  }
  
  // 降级服务到AngularJS
  import { downgradeInjectable } from '@angular/upgrade/static';
  angular.module('angularJsRootModule')
    .factory('formDataService', downgradeInjectable(FormDataService) as angular.IFactoryFunction);
  

  在AngularJS中注入使用：

  angular.module('angularJsRootModule')
    .controller('FormCtrl', ['formDataService', function(formDataService) {
      // 订阅Angular侧的表单更新
      formDataService.formData$.subscribe(data => {
        this.localFormData = data;
      });
      // 向Angular侧推送数据
      formDataService.updateForm(this.localFormData);
    }]);
  

（3）全局事件总线（轻量场景） #

利用RxJS或AngularJS的$rootScope实现事件传递（优先推荐共享服务，此方案仅适用于简单场景）：

// AngularJS中触发事件
$rootScope.$emit('formUpdated', newFormData);

// Angular 16中监听事件
import { Injectable } from '@angular/core';
import { UpgradeModule } from '@angular/upgrade/static';
import { Observable } from 'rxjs';

@Injectable()
export class EventBusService {
  constructor(private upgrade: UpgradeModule) {}

  listen(eventName: string) {
    return new Observable(observer => {
      const unsubscribe = this.upgrade.$injector.get('$rootScope')
        .$on(eventName, (_, data) => observer.next(data));
      return unsubscribe;
    });
  }
}

3. 除iframe和独立路由外的替代方案 #

（1）Web Components（自定义元素） #

将Angular 16组件打包为标准Web Components，直接在AngularJS中作为自定义元素使用，无需依赖升级适配器：

• 在Angular 16中配置自定义元素：

  // app.module.ts
  import { NgModule, Injector } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { createCustomElement } from '@angular/elements';
  import { TargetAngular16Component } from './target.component';
  
  @NgModule({
    imports: [BrowserModule],
    declarations: [TargetAngular16Component]
  })
  export class AppModule {
    constructor(private injector: Injector) {
      const customElement = createCustomElement(TargetAngular16Component, { injector });
      customElements.define('form-builder-element', customElement);
    }
    ngDoBootstrap() {}
  }
  

• 打包为独立JS文件后，在AngularJS应用中引入并直接使用：

  <!-- AngularJS模板 -->
  <form-builder-element form-data="localFormData"></form-builder-element>
  

（2）微前端架构（Single SPA） #

将AngularJS和Angular 16分别作为独立微应用，由Single SPA统一管理路由、生命周期和通信：

• 配置Single SPA路由，匹配特定路径时加载Angular 16微应用，其余路径加载AngularJS应用；
• 通过Single SPA的共享模块或自定义事件实现跨应用数据传递；
• 优势是两者完全解耦，可独立部署，适合大规模增量迁移。

内容的提问来源于stack exchange，提问作者Parth Raval