Integrando atlasmap-2.3.5 (React) en Angular12

31 Jul, 2023 Programación 0

Es un poco desafiante encontrar una solución para integrar una aplicación de React en una aplicación de Angular. En general, hay 2 componentes clave en todo el trabajo: Atlasmap (de código abierto) y Angular. Estoy trabajando en la integración de Atlasmap en Angular 12.

Atlasmap es una aplicación de mapeo de código abierto desarrollada en React.
Atlasmap se ejecuta como una aplicación independiente de React. Atlasmap es un componente principal y se puede encontrar en el repositorio de git.
En el repositorio de Atlasmap, se puede encontrar Standalone, que envuelve y ejecuta la aplicación de Atlasmap.
Atlasmap core consiste en todas las funciones de utilidad necesarias para Atlasmap.

He intentado integrar Atlasmap en Angular como un componente, pero me encontré con un problema.
Pude utilizar el atlasmapProvider, que es un componente principal de atlasmap y proporciona propiedades (entrada para atlasmap) en forma de API que puede ser utilizada por Atlasmap. Pero Atlasmap no puede crear su propio nodo DOM independiente y no se activa sin el componente AtlasmapProvider.

He intentado Direflow, pero hay una incompatibilidad de versiones entre la versión interna de React de Direflow (que admite la versión 16.3) y Atlasmap (17 y superior).

He intentado Stencil.js para generar un componente web y agregar componentes principales y secundarios, pero hay un problema con la configuración no configurable o la ruta incorrecta de los archivos JS compilados, lo que hace que no se incluya en el archivo HTML principal de Stencil.

Rayo de esperanza

Probé otro enfoque en el que inserté un componente basado en React y lo envolví en una aplicación base de Angular. Con éxito, pude colocar el componente de React como un elemento en el DOM y también se activaron algunas API de prueba, pero hay desafíos para ensamblar el componente secundario.
Para consultar mi repositorio de trabajo, haz clic aquí. He agregado node_modules porque he incorporado explícitamente la carpeta de distribución (Dist) de Atlasmap.

¿Alguien puede proporcionar un StackBlitz / Codesandbox funcional configurado en Angular 12 y Atlasmap?

Los enfoques de Iframe o Microfrontend no son aceptables. Se agradecería el uso de un componente web.

Gracias por la ayuda. 🙂

davy.ai

July 31, 2023 at 7:42 pm

Solución para Integrar Atlasmap (React) en una Aplicación Angular

Como experto en tecnologías de la información especializado en JavaScript, Angular, web components, stenciljs y Atlasmap, comprendo el desafío de integrar una aplicación React como Atlasmap en una aplicación Angular. Basado en mi experiencia, existen diferentes enfoques para resolver este problema, pero el más factible es envolver el componente React de Atlasmap en un componente Angular.

A continuación, se presentan los pasos para lograr esto:

Instala las dependencias necesarias. Deberás instalar las dependencias de React y Atlasmap, como los paquetes react, react-dom, @atlasmap/atlasmap y @babel/core.
Crea un nuevo componente Angular que alojará el componente React de Atlasmap. En este ejemplo, lo llamaré atlasmap-wrapper.component.ts.
Agrega las importaciones necesarias al archivo atlasmap-wrapper.component.ts. Deberás importar Component, OnInit, AfterViewInit, ViewChild, ElementRef y Renderer2 del paquete @angular/core. También deberás importar ReactDOM y AtlasMap de sus respectivos paquetes.
```
import { Component, OnInit, AfterViewInit, ViewChild, ElementRef, Renderer2 } from '@angular/core';
import ReactDOM from 'react-dom';
import AtlasMap from '@atlasmap/atlasmap';
```

Define el componente atlasmap-wrapper.

@Component({
  selector: 'app-atlasmap-wrapper',
  template: '<div #atlasmap=""></div>'
})
export class AtlasmapWrapperComponent implements OnInit, AfterViewInit {
  @ViewChild('atlasmap') atlasmap: ElementRef;

  constructor(private renderer: Renderer2) {}

  ngOnInit() {}

  ngAfterViewInit() {
     // Renderiza AtlasMap usando ReactDOM
     ReactDOM.render(<atlasmap></atlasmap>, this.atlasmap.nativeElement);
  }
}

El componente atlasmap-wrapper renderizará un elemento div que servirá como contenedor del componente React de Atlasmap. El decorador @ViewChild seleccionará este elemento div. En el método ngAfterViewInit(), utilizamos ReactDOM para renderizar el componente AtlasMap dentro del elemento div seleccionado.

Agrega el componente atlasmap-wrapper al archivo app.module.ts.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { AtlasmapWrapperComponent } from './atlasmap-wrapper.component';

@NgModule({
  declarations: [AppComponent, AtlasmapWrapperComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Agregamos el componente atlasmap-wrapper a la lista de declaraciones.

Usa el componente atlasmap-wrapper en la aplicación Angular. Puedes agregar el selector app-atlasmap-wrapper en la plantilla de cualquier componente Angular para renderizar el componente React de Atlasmap.
```
<app-atlasmap-wrapper></app-atlasmap-wrapper>
```

Con estos pasos, puedes integrar Atlasmap (React) en una aplicación Angular sin utilizar iframes o enfoques de microfrontend. El enfoque de web components con el componente envolvente de Angular proporciona una solución limpia y sencilla a este problema.

Answer

davy.ai

July 31, 2023 at 7:42 pm
Solución para Integrar Atlasmap (React) en una Aplicación Angular

Como experto en tecnologías de la información especializado en JavaScript, Angular, web components, stenciljs y Atlasmap, comprendo el desafío de integrar una aplicación React como Atlasmap en una aplicación Angular. Basado en mi experiencia, existen diferentes enfoques para resolver este problema, pero el más factible es envolver el componente React de Atlasmap en un componente Angular.

A continuación, se presentan los pasos para lograr esto:
1. Instala las dependencias necesarias. Deberás instalar las dependencias de React y Atlasmap, como los paquetes react, react-dom, @atlasmap/atlasmap y @babel/core.
2. Crea un nuevo componente Angular que alojará el componente React de Atlasmap. En este ejemplo, lo llamaré atlasmap-wrapper.component.ts.
3. Agrega las importaciones necesarias al archivo atlasmap-wrapper.component.ts. Deberás importar Component, OnInit, AfterViewInit, ViewChild, ElementRef y Renderer2 del paquete @angular/core. También deberás importar ReactDOM y AtlasMap de sus respectivos paquetes.
```
import { Component, OnInit, AfterViewInit, ViewChild, ElementRef, Renderer2 } from '@angular/core';
import ReactDOM from 'react-dom';
import AtlasMap from '@atlasmap/atlasmap';
```
4. Define el componente atlasmap-wrapper.
```
@Component({
  selector: 'app-atlasmap-wrapper',
  template: '<div #atlasmap=""></div>'
})
export class AtlasmapWrapperComponent implements OnInit, AfterViewInit {
  @ViewChild('atlasmap') atlasmap: ElementRef;

  constructor(private renderer: Renderer2) {}

  ngOnInit() {}

  ngAfterViewInit() {
     // Renderiza AtlasMap usando ReactDOM
     ReactDOM.render(<atlasmap></atlasmap>, this.atlasmap.nativeElement);
  }
}
```
  El componente atlasmap-wrapper renderizará un elemento div que servirá como contenedor del componente React de Atlasmap. El decorador @ViewChild seleccionará este elemento div. En el método ngAfterViewInit(), utilizamos ReactDOM para renderizar el componente AtlasMap dentro del elemento div seleccionado.
5. Agrega el componente atlasmap-wrapper al archivo app.module.ts.
```
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { AtlasmapWrapperComponent } from './atlasmap-wrapper.component';

@NgModule({
  declarations: [AppComponent, AtlasmapWrapperComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}
```
  Agregamos el componente atlasmap-wrapper a la lista de declaraciones.
6. Usa el componente atlasmap-wrapper en la aplicación Angular. Puedes agregar el selector app-atlasmap-wrapper en la plantilla de cualquier componente Angular para renderizar el componente React de Atlasmap.
```
<app-atlasmap-wrapper></app-atlasmap-wrapper>
```
Con estos pasos, puedes integrar Atlasmap (React) en una aplicación Angular sin utilizar iframes o enfoques de microfrontend. El enfoque de web components con el componente envolvente de Angular proporciona una solución limpia y sencilla a este problema.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

Integrando atlasmap-2.3.5 (React) en Angular12

Answer

davy.ai

Solución para Integrar Atlasmap (React) en una Aplicación Angular