1. Stencil

   • Stencil es un compilador para generar WebComponents que permite crear componentes reutilizables y compatibles con cualquier framework.
   • Sitio web: stenciljs.com

2. Lit

   • Lit es una biblioteca simple para crear componentes web rápidos, ligeros y reutilizables.
   • Sitio web: lit.dev

La arquitectura de microfrontends permite dividir una aplicación web monolítica en aplicaciones más pequeñas y manejables, cada una de las cuales puede ser desarrollada y desplegada de manera independiente. Angular, combinado con Module Federation de Webpack 5, facilita la implementación de microfrontends, permitiendo el intercambio dinámico de módulos entre diferentes aplicaciones.

A continuación, se presenta un ejemplo de la estructura del árbol de ficheros para un proyecto de microfrontends con Angular y Module Federation. Este ejemplo incluye una aplicación host y dos microfrontends.

/microfrontends-project
|-- /host-app
| |-- /src

1. Bootstrap
   • Descripción: Bootstrap es uno de los sistemas de diseño más populares y ampliamente utilizado para el desarrollo web.
   • Enlace: Bootstrap para Angular
   • Componentes: Documentación de Componentes de Bootstrap para Angular
   • Instalación:

npm install ngx-bootstrap bootstrap@latest

1. Remover cualquier referencia de Jasmine / Karma en el package.json

npm remove <karma karma-chrome-launcher...>

2. Instalar Jest

npm install --save-dev jest jest-preset-angular @types/jest

• Modificar angular.json:
  • Añade la siguiente configuración en la sección projects -> your-project-name -> architect -> build:

    "configurations": {
      "production": {

"aot": true

Cada clase o componente debe tener una única responsabilidad. En el contexto de Angular, esto significa que un componente debe estar enfocado en una única tarea o funcionalidad. Por ejemplo, un componente de Angular debería ser responsable de presentar datos en la interfaz de usuario y no debería encargarse también de manejar la lógica de negocio.

// Ejemplo de un componente Angular que viola el principio de responsabilidad única
@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',

• Text Content Generator - http://www.lipsum.com
• Favicon Generator - http://tools.dynamicdrive.com/favicon
• Data Generator - https://mockaroo.com/
• Mobile Mockup Generator - https://mockuphone.com
• Logo Generator - https://www.logaster.com
• UUID Generator - https://www.uuidgenerator.net/
• Hash Generator - https://passwordsgenerator.net/sha256-hash-generator/
• Ultimate Code Generator - https://webcode.tools/

Angular (aka Angular 2) is a new framework completely rewritten from the ground up, replacing the famous AngularJS framework (aka Angular 1.x).

More that just a framework, Angular should now be considered as a whole platform which comes with a complete set of tools, like its own CLI, debug utilities or performance tools.