如何让ExtJS 4.2.x对象在Angular组件中可用，实现双框架共存？

嗨，我看你正在尝试用Angular包裹ExtJS 4.2.x应用做渐进式迁移，这个思路非常务实！针对你遇到的Angular构建/运行时找不到Ext对象的问题，咱们可以从这几个核心点来解决：

1. 确保ExtJS脚本优先于Angular脚本加载 #

Ext是全局对象，必须让浏览器在加载Angular的代码之前就完成ExtJS资源的加载。你需要修改ExtJS应用的index.html，把ExtJS的样式和脚本放在Angular构建文件的前面引入：

<!-- 先加载ExtJS核心资源 -->
<link rel="stylesheet" type="text/css" href="./extjs/resources/css/ext-all.css">
<script type="text/javascript" src="./extjs/ext-all.js"></script>

<!-- 再加载Angular构建产物 -->
<script src="ngBuild/runtime.js" defer></script>
<script src="ngBuild/polyfills.js" defer></script>
<script src="ngBuild/main.js" defer></script>

<app-root></app-root>

这样Angular启动时，全局的Ext对象已经存在，不会出现找不到的情况。

2. 给TypeScript添加Ext的类型声明 #

Angular基于TypeScript，TS会因为找不到Ext的类型定义而抛出编译错误。咱们可以手动添加一个类型声明文件来解决：

• 在你的Angular项目（NgApp）的src目录下创建typings.d.ts文件
• 在文件中添加全局声明：

declare var Ext: any;

如果后续需要更精准的类型支持，也可以尝试查找ExtJS 4.2对应的@types包（不过版本较老可能没有，用any过渡完全够用）。

3. 调整Ext.onReady的执行逻辑 #

你把Ext.onReady放在ngOnInit里的思路是对的，但可以加一层校验确保Ext已完全初始化：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  template: '<div id="ext-host"></div>'
})
export class AppComponent implements OnInit {
  ngOnInit(): void {
    // 先校验Ext是否已加载完成
    if (typeof Ext !== 'undefined') {
      Ext.onReady(() => {
        // 在这里渲染你的ExtJS组件，指定到Angular模板的容器中
        Ext.create('Ext.Viewport', {
          renderTo: 'ext-host',
          // 你的ExtJS配置项...
          items: [{
            xtype: 'panel',
            title: 'ExtJS in Angular',
            html: '双框架共存测试'
          }]
        });
      });
    } else {
      console.error('ExtJS资源加载失败，请检查路径是否正确！');
    }
  }
}

4. 验证Angular构建路径的正确性 #

你使用的构建命令ng build -vc false -op C:\Ext\Ext6Grid\ngBuild要确保输出路径和index.html中引入Angular脚本的路径一致，避免因为脚本404导致的隐性问题。

额外小建议 #

后续迁移时，可以把不同的ExtJS功能模块封装成独立的Angular组件，这样可以逐步替换成纯Angular实现，让整个迁移过程更可控。

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