I have an AngularJS application(say x) which we were using as a directive in our other AngularJS applications before.
Now we are using Angular 8 for our new applications and we need to use the same AngularJS component(x).
Is there a way to do that without migrating the code of this component x to newer Angular version since the code of this component x is huge.
Someone told me to use micro frontend but i couldn't understand how to use that in this scenario.
Any thoughts/suggestions would be greatly appreciated!
One possible way is to transform your Angular 8 application in an hybrid application that can bootstrap each of the Angular and AngularJS parts. To do that your AngularJS app needs to be in 1.5
See this documentation to turn your app in an Hybrid app : https://angular.io/guide/upgrade
Then, you extract your AngularJS directive in a package that can be use in both applications and avoid duplicated code.
And maybe this old topic can help you :) : Use AngularJS directive in Angular Component
Related
I am working in a project which is developed using AngularJS1.2, since it is older I am thinking to write feature modules in separate app using Angular and then with the help of Microfrontend thinking to combine with older app. To achieve this, I am not able to get a good source/guide. Can anyone please help me.
I see 3 ways but haven't tried any of them though. So, I don't have any working solution.
Have a route from angularjs that points to angular app(full page load) and everything from there onwards, angular handles everything. There is no angularjs involved. This may not be the best option.
Let angular code load on demand when the feature is required and provide placeholders for the angular features inside angularjs project. This way you can share custom scope to nested child angular project.
Use web components developed in angular(angular elements) and use them in your angularjs application. They work independent of technology/framework/library.
I have a Cordova app built using Angular 1 i.e. Angular JS. How I can upgrade the app yo latest angular version.
Will it require complete code re-write to TypeScript (TS)??
TypeScript is not a requirement for writing Angular 2+. However, Angular 2-7 does not have much in common with AngularJS as it doesn't have the same architecture or components. For example, from what i've read about it, AngularJS used a MVC model, Angular2+ does not.
So to answer your question, you will indeed need to rewrite most of your application. Going from Angular 2 to 7 is much easier as not much has changed.
We are currently working with Angular JS 1.6. Our achitecture Layers as follows,
HTML Page,
Controller (MVC Controller),
Service (Holds $resource for service side API),
State (Holds states for a functionality)
* Functionality is collection of HTML pages.
We are planning to migrate to Angular 4.0. Exiting project which is in Angular JS 1.6 has huge number of pages that needs to be redesign. Is it possible to develop new pages in Angular 4.0 and reuse the existing pages which are present in Angular Js 1.6..?
Can both the version coexists in a same project...?
How to achieve that..?
There is a thing called ngUpgrade. Which basically doing what you are asking.
When you use ngUpgrade, what you're really doing is running both
AngularJS and Angular at the same time.
Here is a tutorial which explains how does it work and what are the crucial steps to use upgrade strategy.
Currently we have application developed in Angular 1.X but we don't want to migrate from Angular 1.X to Angular 2, Since it is very wast application it will require more effort. We want other way around . Can we use Angular 2 features within Angular 1.X Application. In future whichever pages is created should be in Angular 2 but need to be worked side by side with Angular 1.X .. Like calling new route or new component from Angular 2 from Angular 1.X. Please let me know whether its possible or not.
Thanks
Kind of. What you are looking for is an Angular Hybrid app. Here's an article to help with what you are looking for.
Yes, it is possible.
You can use the new angular components/modules in a legacy angular application (downgrading) or you can use legacy components in the a new angular application (upgrading).
There is a section on the angular webpage describing all this. Direct link is here
https://angular.io/guide/upgrade#using-angular-components-from-angularjs-code
If I want to use the Angular-upgrade module in my Angular1 application it seems like I have to bootstrap the whole app using Angular2's bootstrapping, including ditching the ng-app declaration. My team is very interested in graduating our apps' components over time to Angular 2, but touching the bootstrapping is a little too impactful for us at this moment.
In order to use the Upgrade Adapter do I have to transform the way my app bootstraps in order to use an Angular2 component? Is there anyway to use an Angular2 component in a full Angular1 app?
Here's a great article that describes multiple scenarios for upgrading, but none of them leave the app bootstrapped as a normal Angular1 app.
Short answer is No.
From angular documentation
Pure Angular 1 applications can be bootstrapped in two ways: By using
an ng-app directive somewhere on the HTML page, or by calling
angular.bootstrap from JavaScript. In Angular 2, only the second
method is possible - there is no ng-app in Angular 2. This is also the
case for hybrid applications. Therefore, it is a good preliminary step
to switch Angular 1 applications to use the JavaScript bootstrap
method even before switching them to hybrid mode.
For better understanding how upgrade works read this article from official documentation https://angular.io/docs/ts/latest/guide/upgrade.html