AngularJS1.2 & Angular using Microfrontend - angularjs

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.

Related

Is there a vite plugin for angularjs apps that would enable some for of HMR?

We are rewriting an AngularJS app with svelte components and using Vite for building it.
It works great for the svelte components, but changes made to AngularJS code files requires the whole application to reload.
Has anyone solved that problem or and pointers that would help us construct the angularjs app differently in order to achieve that?
We changing pieces of it to Typescript, and import every file required. But the imports are not all referenced. Since AngularJS apps use injection.
Definitely not. AngularJS module unloading isn't a thing as it was never designed for that.
More information in this similar post: https://stackoverflow.com/a/23000380/4096074

Does anyone know how I can embed Vue component/Project into Angular JS?

I have spent some time on this. I have an HUGE Angular JS project ( Angular 1.6.5). I would like to move some components into Vue.
First thing we came across is Web Components: but AngularJS application must be on version 1.7.3 or higher.
We explored ngVue library but : . To use this https://www.nodenpm.com/ngVue/0.1.0/detail.html library in AngularJS, your application must be on version 1.7.9 or higher.
We have vue-custom-component which seems like basically wrapper to web components itself.
We are left with iframe, which we know works from the start but we were trying to avoid it.
Has anyone tried such thing already? Do we know of any other alternative library we can use to achieve the benefits of web-components in angularjs 1.6.
Thank you in advanc

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

Use Angular 2 pages in Angular 1

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

Integrating angular js with existing javaScript code

We are working on pure javaScript project, which could really benefit by using angular js but it's a huge project and re-writing the whole project in angular is not an option . Does anyone have any idea or advice about integrating angular with an existing project
Angular is a framework. It's all or nothing...you are going to rewrite everything just due to the nature of how Angular works. You can't really just 'sprinkle' some Angular on top of it because Angular controls the entire view.
It may be possible to just use Angular in a certain area of the page, but this would be a huge waste of resources (Angular minified is 143K) and make for terrible code.

Resources