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.
Approach I am trying:
- I have created app(name is: NgApp) scaffolding using angular-cli and put that code inside the root directory of Ext app(ExtNg).
- Created a folder(ExtNg/NgBuild)to hold the build file of angular JS app(NgApp).
- Built angular app : ng build -vc false -op C:\Ext\Ext6Grid\ngBuild
- I have modified app.js
autCreateViewPort: false
so it will initiate the ext app but will not render it. modified my Ext app's index.html body as below:
<body> <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> </body>
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.
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.
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.