Bit challenging to find a solution for integrating react application into Angular app. Broadly there are 2 pieces in whole work first Atlasmap ( Open source) and Angular.I am working on integrating Atlasmap in Angular 12.
Atlasmap is an open source mapping app developed in react.
Atlasmap runs in react standalone application. Atlasmap is a root component and can be found in the git repo.
In Atlasmap repository, it could be found Standalone - Which wraps and runs Atlasmap application.
Atlasmap core- consists of all utilities function required for Atlasmap.
I have tried - Integrating the atlasmap into angular as a component, but there issue I faced is
I am able to atlasmapProvider which is a parent component of atlasmap and provide properties(input to atlasmap ) in the form of API which could be utilised by Atlasmap. But Atlasmap cannot create its independent DOM node and doesn't get activated without AtlasmapProvider component.
I have tried Direflow , But there is mismatch of Version of react and reactDom version between direflow internal react Version which supports ( 16.3) and Atlasmap (17 and above)
I have tried Stencil.js to generate web component and adding parent child web components but there is issue with non configurable or not properly getting build JS files path due to which it doesn't get in context of Stencil's index html file.
Ray of hope
I tried another approach where I inserted react based component and wrapped into angular base app and successfully I am able to place the react component as an element in DOM , the few test API's also got triggered but there are challenges in getting child component assembled. for reference of my working repo is here I have added node_modules as I have embedded Dist folder of Atlasmap explicitly.
Can someone provide a working StackBlitz / Codesandbox configured in Angular 12 and Atlasmap.
Iframe or Microfrontend approaches are not acceptable. Web component will be highly appreciated Thanks for help :)
