{"id":20822324,"url":"https://github.com/potier97/angular-microfront","last_synced_at":"2026-05-11T07:32:45.342Z","repository":{"id":169231775,"uuid":"631973288","full_name":"potier97/angular-microfront","owner":"potier97","description":"Primer test de angular con Microfronts y Module Federation","archived":false,"fork":false,"pushed_at":"2023-12-17T16:44:58.000Z","size":684,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-18T16:50:09.677Z","etag":null,"topics":["angular","microfrontend","module-federation","webpack"],"latest_commit_sha":null,"homepage":"https://angular-microfront.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/potier97.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-04-24T12:58:24.000Z","updated_at":"2023-04-24T22:33:16.000Z","dependencies_parsed_at":"2023-12-17T17:43:04.332Z","dependency_job_id":"7eb869ce-417c-4c4f-8943-e6063883b4c7","html_url":"https://github.com/potier97/angular-microfront","commit_stats":null,"previous_names":["potier97/angular-microfront"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/potier97%2Fangular-microfront","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/potier97%2Fangular-microfront/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/potier97%2Fangular-microfront/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/potier97%2Fangular-microfront/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/potier97","download_url":"https://codeload.github.com/potier97/angular-microfront/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243169551,"owners_count":20247573,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","microfrontend","module-federation","webpack"],"created_at":"2024-11-17T22:14:37.678Z","updated_at":"2026-05-11T07:32:40.319Z","avatar_url":"https://github.com/potier97.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# NpaMicroFrontMofe\n\n## Creación del Proyecto\n\nSe crea el esqueleto de la app\n[Basado en](https://www.youtube.com/watch?v=12x2QpDCsfk\u0026ab_channel=LogiDev)\n\n```\n ng new npa-micro-front-mofe --create-application=false\n```\n\n![](https://github.com/potier97/angular-microfront/blob/master/assets/creacion.PNG)\n\n\n## Creación del Host \n\nConocido como el \"CONTENDEDOR\" del sitio, normalmente se declara como shell, se configurar las opciones basicas como el routing y los estilos del sitio\n\n```\nng generate application mf-shell --style=scss --routing=true\n```\n\n![](https://github.com/potier97/angular-microfront/blob/master/assets/creacion-shell.PNG)\n\n## Creación de un Microfront \n\nContenido de la aplicación, normalmente se crea sin hoja de rutas, se configurar unicamente con los estilos del sitio\n\n```\nng generate application mf-payments --style=scss --routing=false \nng generate application mf-shopping --style=scss --routing=false \n```\n\n![](https://github.com/potier97/angular-microfront/blob/master/assets/creacion-mf1.PNG)\n![](https://github.com/potier97/angular-microfront/blob/master/assets/creacion-mf2.PNG)\n\n## Creación de una Lubreria \n\nAplicación con la libreria de la aplicación, para compartir los componentes y servicios unicos del sitio\n\n```\nng generate library commons-lib \n```\n\n![](https://github.com/potier97/angular-microfront/blob/master/assets/creacion-library.PNG)\n\n## Instalación libreriaModule Federation\n\nLibreria para control de la federación de los modulos\n\n```\nnpm i -D @angular-architects/module-federation\n```\n\n![](https://github.com/potier97/angular-microfront/assets/63369773/16eede27-c0c3-4f14-88ec-362ac92e8121)\n\n## Agregar la herramienta a cada Modulo\n\nSe configura los projects en los que ejecutan componentes o shell de Angular\nSe configura para el Shell\n - Project -\u003e Nombre del micro\n - Port -\u003e Puerto en el que corre\n - Type host -\u003e Siempre seran host para la shells\n\n```\nng add @angular-architects/module-federation --project mf-shell --port 4200 --type host\n```\n\n![](https://github.com/potier97/angular-microfront/blob/master/assets/mf-configuration.PNG)\n\nConfiguración Microfronends\nSe debe tener en cuenta:\n - Project -\u003e Nombre del micro\n - Port -\u003e Puerto en el que corre\n - Type remote -\u003e Siempre seran remote para los micros\n\n```\nng add @angular-architects/module-federation --project mf-payments --port 4208 --type remote\nng add @angular-architects/module-federation --project mf-shopping --port 4210 --type remote\n```\n\n![](https://github.com/potier97/angular-microfront/blob/master/assets/mf-configuration-1.PNG)\n![](https://github.com/potier97/angular-microfront/blob/master/assets/mf-configuration-2.PNG)\n\nPosterior a la modificación de los microfront con el CLI se hace la configuración del shell en el webcongif para configurar los puertos definidos\n\n\n![](https://github.com/potier97/angular-microfront/blob/master/assets/puertos-shell.PNG)\n\n\n## Generar Modulos dentro de los MF\n\nSe ejecutan los comandos normalmente como se hace en cualquier proyecto de angular, pero se incluye el nombre del proyecto\n\n```\nng generate module products --project mf-shopping\n```\n\n![](https://github.com/potier97/angular-microfront/blob/master/assets/modulos.PNG)\n\n\n## Generar Archivo de Rutas dentro de los MF\n\nSe ejecutan los comandos normalmente como se hace en cualquier proyecto de angular, pero se incluye el nombre del proyecto\n\n```\nng generate module app-routing --flat --module=app --project mf-shopping\n```\n\n![](https://github.com/potier97/angular-microfront/blob/master/assets/routes.PNG)\n\n\n## Generar Archivo de Componentes dentro de los MF\n\nSe ejecutan los comandos normalmente como se hace en cualquier proyecto de angular, además se le indica el nombre del micro y el nombre del modulo\n\n```\nng generate component products  --module=products --project mf-shopping   \n```\n\n![](https://github.com/potier97/angular-microfront/blob/master/assets/components.PNG)\n\nComponentes anidados\n\n```\nng generate component products  --module=products --project mf-shopping   \n```\n![](https://github.com/potier97/angular-microfront/blob/master/assets/nested-components.PNG)\n\n---------------------------------------------------------------------\n\n## Commons Lib\n\nSe debe tratar como una dependencia más del proyecto, por ende se debe de compilar previamente, es la unica que tiene  un package.json adicional, por lo tanto si se comparten las mismas dependencias con el proyecto general y la libreria, se debe´ra de instalar la misma versión.\n\nSe configura el alias del tsconfig para hacer referencia a esta y poder ser llamada desde los micros\n\n![](https://github.com/potier97/angular-microfront/blob/master/assets/alias-library.PNG)\n\nSe debe de configurar cada Micro para que acepte las configuraciones de los alias\n\n![](https://github.com/potier97/angular-microfront/blob/master/assets/alias-modules.PNG)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpotier97%2Fangular-microfront","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpotier97%2Fangular-microfront","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpotier97%2Fangular-microfront/lists"}