如何将我的 Extjs 4.2.x 项目放入最新的 Angular 应用程序中 [英] How can I put my Extjs 4.2.x project inside latest Angular App

问题描述

我有一个内置于 Ext4.2.x 的大型应用程序.现在的需求是在 Angular 中做进一步的开发.我正在尝试围绕 Ext 应用程序创建 Angular 的包装器，以便我们可以使用 angular 进一步开发/迁移代码.直到两个框架应该协调工作.

I have a large app built in Ext4.2.x. Now the requirement is to do further development in Angular. I am trying to create a wrapper of Angular around Ext app so that we can use angular for further development/ migration of code piece by piece. till the time both the framework should work in harmony.

1. 我已经使用 angular-cli 创建了应用程序(名称是:NgApp)脚手架并将该代码放在 Ext 应用程序的根目录中(ExtNg强>).
2. 创建一个文件夹(ExtNg/NgBuild)来保存 Angular JS 应用程序(NgApp)的构建文件.
3. 构建角度应用程序:ng build -vc false -op C:\Ext\Ext6Grid\ngBuild
4. 我修改了 app.js autCreateViewPort: false 所以它会启动 ext 应用程序但不会呈现它.

5. 修改我的 Ext 应用程序的 index.html 正文如下:

1. I have created app(name is: NgApp) scaffolding using angular-cli and put that code inside the root directory of Ext app(ExtNg).
2. Created a folder(ExtNg/NgBuild)to hold the build file of angular JS app(NgApp).
3. Built angular app : ng build -vc false -op C:\Ext\Ext6Grid\ngBuild
4. I have modified app.js autCreateViewPort: false so it will initiate the ext app but will not render it.

5. modified my Ext app's index.html body as below:

<代码><正文><app-root></app-root><script type="text/javascript" src="ngBuild/inline.bundle.js"></script><script type="text/javascript" src="ngBuild/polyfills.bundle.js"></script><script type="text/javascript" src="ngBuild/styles.bundle.js"></script><script type="text/javascript" src="ngBuild/main.bundle.js"></script>

现在我尝试将我的 Ext.onReady() 代码放在 app.component.ts 类的 ngOnInit() 中并指定 renderTo: someElemIDinAppComponentTemplate 方法来启动 Ext在角度组件内.

Now I tried putting my Ext.onReady() code in app.component.ts class's ngOnInit() and specified renderTo: someElemIDinAppComponentTemplate method to start Ext inside an angular component.

所以这里的问题正如预期的那样，在构建 angular 应用程序时它没有找到 Ext 对象，因为 Angular 作为框架不知道 Ext 是否存在.

So the problem here is as expected that while building angular app it does not find Ext object because Angular as framework dont know if Ext is there or not.

那么谁能帮我在我的 angular 应用程序的组件中获得 Ext 可用?所以想与那里的所有天才分享.

So could anyone help me getting Ext available inside my angular app's component?? So thought to share with all the geniuses out there.

我很乐意为您提供任何建议.谢谢你.

I will be glad for any suggestions. Thank you.

推荐答案

我认为您从错误的角度看待这个问题.我建议您可以构建 angular 应用程序，并将您的 ExtJS 组件放在那个东西中，而不是相反.

I think that you are looking into this issue from the wrong angle. I suggest that you may build the angular app, and put yor ExtJS components inside that thing, not the opposite.

在这里，你有一个你想要做的近似方法:https://www.sencha.com/blog/first-look-ext-js-bridge-to-angular-2/

Here, you have an approximated approach of what you are trying to do : https://www.sencha.com/blog/first-look-ext-js-bridge-to-angular-2/

我想相信The Bridge"也与新的 Angular 版本兼容.

I want to believe "The Bridge" is also compatible with new Angular versions.

这篇关于如何将我的 Extjs 4.2.x 项目放入最新的 Angular 应用程序中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！