AngularJS 1.5升级Angular 4混合应用中第三方组件使用问题

我刚好处理过类似的混合升级场景，你遇到的问题本质是混合模式下Angular的组件注册规则导致的——默认只有根模块声明并加入entryComponents的组件才能被降级后在AngularJS中使用，第三方组件显然不在这个列表里。下面是具体的解决步骤：

1. 正确引入第三方组件的模块 #

首先确保你已经通过npm安装了目标树形组件，然后在Angular根模块（比如AppModule）中导入它对应的模块。举个例子，如果用的是ngx-treeview，代码应该是这样：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { TreeviewModule } from 'ngx-treeview'; // 导入第三方模块
import { AppComponent } from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    TreeviewModule.forRoot() // 初始化第三方模块（如果需要）
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

2. 将第三方组件加入根模块的entryComponents #

混合应用中，所有要降级到AngularJS的组件都需要被Angular提前编译，entryComponents就是告诉Angular哪些组件需要预编译。把第三方树形组件添加到这个数组里：

// 继续上面的AppModule代码
@NgModule({
  // ...其他配置
  entryComponents: [TreeviewComponent], // 加入第三方组件类
})
export class AppModule {}

3. 创建第三方组件的降级指令 #

和你降级自己写的Angular组件一样，用Angular提供的downgradeComponent函数把第三方组件转换成AngularJS指令：

import { downgradeComponent } from '@angular/upgrade/static';
import { TreeviewComponent } from 'ngx-treeview';

// 在你的AngularJS模块中注册这个降级指令
angular.module('yourAngularJsApp')
  .directive('ngxTreeview', downgradeComponent({
    component: TreeviewComponent,
    inputs: ['items', 'config'], // 根据组件的输入属性调整
    outputs: ['selectedChange'] // 按需添加输出事件
  }) as angular.IDirectiveFactory);

4. 在AngularJS模板中使用降级后的指令 #

现在你就可以像使用普通AngularJS指令一样在模板里调用它了：

<ngx-treeview 
  items="vm.treeData" 
  config="vm.treeConfig" 
  (selected-change)="vm.handleTreeSelection($event)"
></ngx-treeview>

额外注意事项 #

• 如果第三方组件依赖特定的Angular服务，确保这些服务已经在根模块的providers中注册，或者第三方模块已经自动导出了这些服务（大部分正规组件都会处理好这点）。
• 要是遇到依赖注入的问题，可能需要用downgradeInjectable把对应的Angular服务降级，供AngularJS侧使用。
• 如果某个第三方组件实在无法通过这种方式适配（比如依赖Angular 4以上的某些混合模式不兼容的特性），那你可以暂时用AngularJS生态的树形组件过渡，优先升级使用该组件的业务模块，直到整个应用完成升级。

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