Tengo mi aplicación principal (principal) escrita en Angular. Ahora quiero usar un componente de reacción dentro de la aplicación principal usando el enfoque de micro-frontend, pero quiero que sea una integración de tiempo de ejecución.
por ejemplo, el encabezado de mi aplicación está en Angular. Ahora quiero que el pie de página esté en reacción, pero que se implemente en el servidor que no sea la aplicación principal. Quiero esta integración en tiempo de ejecución.
¿Cómo puedo lograr esta arquitectura?
Se recomienda la arquitectura con microfrontera de federación de módulos.
Debería tener una aplicación de contenedor único (principal) con webpack.config.js como este:
const HtmlWebpackPlugin = require('html-webpack-plugin'); const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin'); module.exports = { mode: 'development', devServer: { port: 8080, }, plugins: [ new ModuleFederationPlugin({ name: 'container', remotes: { Header: 'header@http://localhost:8081/remoteEntry.js', Footer: 'footer@http://localhost:8082/remoteEntry.js', }, }), new HtmlWebpackPlugin({ template: './public/index.html', }), ], }; y separe los componentes de pie de página y encabezado como un proyecto de entrada remota, cada componente incluye webpack.config.js remoteEntry este:
const HtmlWebpackPlugin = require('html-webpack-plugin'); const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin'); module.exports = { mode: 'development', devServer: { port: 8081, }, plugins: [ new ModuleFederationPlugin({ name: 'header', filename: 'remoteEntry.js', exposes: { './Header': './src/index', }, }), new HtmlWebpackPlugin({ template: './public/index.html', }), ], };e importar el encabezado de esta manera:
import Header from 'Header/header' ejecutar estos proyectos con webpack serve
puede desarrollar cada componente remoto con angular, reaccionar o ... porque después de la compilación hemos compilado y archivos js puros
clone este repositorio: https://github.com/rzghorbani72/microfrontend-modulefedefation/tree/master/mf-project-1