Use Angular 2 pages in Angular 1 - angularjs

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

Related

AngularJS component as a component in Angular 8

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

AngularJS1.2 & Angular using Microfrontend

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.

Upgrade AngularJS to Angular 6 in Cordova App

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.

Coexistence of Angular 4 and Angular JS 1x

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.

Planning to use angular 2, but our existing app is using angular 1.x. Is there any documentation on using angular 2 along with angular 1.x?

We will not be able to re write our app now also we don't want to create a new app for just angular 2. Trying to find a way to use both so that we can migrate slowly.
on Angulars official site they have docs for converting form angular 1 to angular 2 located here angular.io this will probably be your best bet rather than mixing angular one with angular 2.

Resources