Include built ReactJS 16.x app into AngularJS 1.x - angularjs

For a project I am working on, there is a situation where I have to include and ReactJS app which is already compiled into an AngluarJS project. Chrome/Firefox Browser is the Enduser-Interface.
I know that this setup isn't the best, unfortunately I have to deal with both frameworks in this exact setup.
I am not allowed to use an IFrame neither.
I googled a lot, searching for wrapper, which exists but only if the react project isn't already built.
Does anyone have a solution for this?

I am not sure your requirement, as per my understanding, you can import the "ngmodule" to react component and render the angular script. In this case you can achieve it from server side rendering.
In our project, we have the common login module developed in Angular 1.x, we are rendering the angular module in React.

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

Can I use a react-native web module in a react app?

I have a module I created that uses #react-native-async-storage and I do know it uses LocalStorage for the web.
What I was wondering is whether I can use my module which uses #react-native-async-storage on a non-native react application?
I just tried to port it and it was giving me some errors starting up the app, but I think it's just my configuration.
Should I use react-native-web to convert a React-native app to a web app or implement it from scratch on React JS is a similar question, but I am looking for a smaller fragment of code rather than the whole app.

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

Best Approach of Using React Component in Angular 8+?

I Have an angular Application build on 8+ now I have a requirement where I want to create react component and embed it in Angular Application.
How my Angular folder structure will be modified, is there any possible design pattern I have to follow while working both angular and react in one application?
I am not a guru of the frontend, as I know it is possible.
Interact through Web Component spec
Apply Microfrontend patterns to mix Angular/React in the sample application
Ionic team created a project named stencil which targets WebComponent development and conceptly it mixes the Angular and React good part in the same framework.

How to build a standalone / framework agnostic web component widget to use in any web app?

I would like to build a complicated web component that:
I Can use in my legacy web site (or any other site)
It can be used weather my web site is built with Angular/Angular2/React/Jquery etc...
I can use any technology to build it Angular/Angular2/React etc...
Avoid dependencies & versioning collisions (i.e my component is built with Angular 1.5.6 and the implementing website has Angular 1.4.7)
Would using NPM module could solve this issue (versioning, depenencies etc..) ?
Edit: (example)
For example i would require my component via npm
which has the dependency (requires) the framework i chose (i.e angular 1.5.6)
in this scenario wouldn't my component code use my dependency from NPM (regardless what the site uses)?
You may use a component built with angular on a legacy site but you must load angular before. You should be aware of name collision you might have with other directories.
If the site is already built with angular 1.x you may just blend your component in, considering that your component is compatible to the angular version the site is using.If it is not, I think react can be possible because it may blend in.
In case the site is built with angular 1.4.7, as you have said, you might need to downgrade your component to be used by 1.4.7. This means that if you're using angular.module(...).component you will need to switch it to directive. Alternatively you may switch the site to work with 1.5 if it is possible. If not, you may go back to react.
If you want to use angular 2.0, you may do so side by side with angular 1.x, however, the legacy application needs to be bootstraped with angular upgrade module, using upgradeAdapter. This means you need to interfere with the application, which you don't want to, if I understand you correctly.

Resources