Гармонійна інтеграція Angular у React додаток через Module Federation: глибоке занурення

8 Березня 2024 в 16:26 28

У сучасному веб-розробництві поєднання різних фреймворків у одному додатку стає звичайною практикою. Module Federation відкриває нові можливості для розробників, дозволяючи створювати мікрофронтенд архітектури з легкістю та гнучкістю. Ця стаття поглиблено розглядає процес інтеграції Angular додатку в React за допомогою Module Federation, з особливим акцентом на передачу даних між фреймворками.

Чому Module Federation?

Module Federation є частиною Webpack 5, яка дозволяє різним JavaScript додаткам ділитися компонентами динамічно в реальному часі. Така можливість не лише спрощує процес розробки мікрофронтендів, але й забезпечує більшу гнучкість у управлінні залежностями та версіями компонентів.

Перші кроки з Module Federation

Першим кроком у використанні Module Federation для інтеграції Angular в React є налаштування Webpack конфігурації обох додатків. Для Angular додатку, що буде виступати як віддалений модуль, важливо вказати, які саме компоненти будуть доступні для інших додатків.

// Webpack конфігурація для Angular (Remote)
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'angularApp',
      filename: 'remoteEntry.js',
      exposes: {
        './AppComponent': './src/app/app.component.ts',
      },
      shared: { ... }
    })
  ],
};

// Webpack конфігурація для Angular (Remote)

module.exports = {

plugins: [

new ModuleFederationPlugin({

name: 'angularApp',

filename: 'remoteEntry.js',

exposes: {

'./AppComponent': './src/app/app.component.ts',

shared: { ... }

})

};

Для React додатку, який буде господарем (Host), конфігурація міститиме інформацію про те, де знаходяться ресурси віддаленого Angular додатку.

// Webpack конфігурація для React (Host)
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      remotes: {
        angularApp: 'angularApp@http://localhost:4200/remoteEntry.js',
      },
      shared: { ... }
    })
  ],
};

// Webpack конфігурація для React (Host)

module.exports = {

plugins: [

new ModuleFederationPlugin({

remotes: {

angularApp: 'angularApp@http://localhost:4200/remoteEntry.js',

shared: { ... }

})

};

Інтеграція та спілкування між додатками

З налаштуванням Webpack завершеним, можна приступати до безпосередньої інтеграції Angular компоненту в React додаток. Використання React компоненту як контейнера для Angular компоненту дозволяє імпортувати та монтувати Angular динамічно.

import React, { useEffect, useRef } from 'react';
const AngularComponent = ({propsPassedToAngular}) => {
  const angularComponentRef = useRef(null);
  useEffect(() => {
    import('angularApp/AppComponent').then(({ AppComponent }) => {
      // Місце для монтування Angular компоненту та передачі props
    });
  }, []);
  return &lt;div ref={angularComponentRef}&gt;&lt;/div&gt;;
};
export default AngularComponent;

import React, { useEffect, useRef } from 'react';

const AngularComponent = ({propsPassedToAngular}) => {

const angularComponentRef = useRef(null);

useEffect(() => {

import('angularApp/AppComponent').then(({ AppComponent }) => {

// Місце для монтування Angular компоненту та передачі props

});

}, []);

return <div ref={angularComponentRef}></div>;

};

export default AngularComponent;

Передача даних із React в Angular

Щоб передати дані з React компоненту в Angular, можна скористатися атрибутами DOM елемента, до якого монтується Angular компонент. Використання такого підходу дозволяє Angular компоненту отримувати дані як вхідні параметри.

// В Angular компоненті
ngOnInit() {
  // Приклад отримання даних, переданих з React
  const props = this.elementRef.nativeElement.getAttribute('data-props');
  if (props) {
    this.inputData = JSON.parse(props);
  }
}

// В Angular компоненті

ngOnInit() {

// Приклад отримання даних, переданих з React

const props = this.elementRef.nativeElement.getAttribute('data-props');

if (props) {

this.inputData = JSON.parse(props);

}

Переваги та виклики

Інтеграція Angular у React через Module Federation має ряд переваг, зокрема, ефективне використання ресурсів, гнучкість управління залежностями та можливість швидкого оновлення частин додатку без необхідності перезавантаження всього додатку. Однак, серед викликів слід зазначити складність налаштування та потенційні проблеми з безпекою при неправильному конфігуруванні залежностей.

Заключення

Module Federation відкриває нові горизонти для розробки мікрофронтендів, забезпечуючи гнучкість та ефективність робочих процесів. Інтеграція Angular у React додаток є відмінним прикладом того, як можна ефективно використовувати ці технології для створення сучасних веб-додатків. Важливо пам’ятати про необхідність глибокого розуміння обох фреймворків та Module Federation для досягнення найкращих результатів.