Este repositorio consta de una aplicación raíz spa generada con Single-SPA CLI.
Dicha aplicacion, se encarga de montar y desmontar aplicaciones frontend de manera agnostica al framework en el que se hayan desarrollado.
Para esto, es necesario que cada aplicación tenga un main con las funciones de bootstrap, mount y unmount.
A su vez, disponemos de 2 aplicaciones Angular, my-app y another, ambas generadas con Angular CLI versión 10.0.4.
En la raíz de las 2 aplicaciones anteriormente mencionadas, corrimos el siguiente comando ng add single-spa-angular.
Para el custom element
Las Apps que no traen server propio las estamos levantando con "serve". Un server liviano para nodejs
npm i -g serveIngrese a la carpeta spa y ejecute npm start. Navegue a http://localhost:9000/.
Ingrese a la carpeta my-app y ejecute npm run serve:single-spa:my-app para levantar la aplicacion.
Ingrese a la carpeta another y ejecute npm run serve:single-spa:another para levantar la aplicacion.
Ingrese a la carpeta web-components y ejecute serve -C.
Ingrese a la carpeta shared y ejecute serve -C -l 1234.
- SingleSpa: The Recommended Setup
- Referencia ImportMaps
- Systemjs ImportMaps
- What are CJS, AMD, UMD, and ESM in Javascript?
- Web Components
- WebPack: Module Federation
- Angular with Module Federation
- An ESM bundle for any NPM package
- Tactical Domain-Driven Design with Angular and Monorepos?
-
SingleSPA / Shell Nativo / Shell Angular
-
MicroFront : AngularElements / Angular Module Federation con Shell Angular / Angular SingleSPA / AngularElements Single SPA
-
Carga del MF:
-
CodeSharing: Global / ImportMap / Module Federation / NADA
-
Estado Compartido: Servicio Angular publicado en NPM trabajando su estado en window compartida en lugar de this / Inyectar customProperty en singleSPA
-
Features: Live Reload, Compilacion parcial, etc.
-
Modularizacion: ECMA Script Modules, SystemJS, UMD (NodeJS + AMD)