{"id":25238080,"url":"https://github.com/juliojavif/micro-fronts-angular","last_synced_at":"2026-05-15T12:03:05.300Z","repository":{"id":267193352,"uuid":"900495678","full_name":"JulioJavif/micro-fronts-angular","owner":"JulioJavif","description":"Prueba de concepto para crear un microfront y utilizarlo en un frontend de angular","archived":false,"fork":false,"pushed_at":"2024-12-08T23:36:57.000Z","size":122,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-05T18:52:29.493Z","etag":null,"topics":["angular","microfrontend","module-federation","webpack"],"latest_commit_sha":null,"homepage":"","language":"HTML","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/JulioJavif.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":"2024-12-08T22:48:49.000Z","updated_at":"2024-12-08T23:37:01.000Z","dependencies_parsed_at":"2024-12-09T00:28:16.114Z","dependency_job_id":"96381528-91e7-4c9c-9ee3-3cf85118067a","html_url":"https://github.com/JulioJavif/micro-fronts-angular","commit_stats":null,"previous_names":["juliojavif/micro-fronts-angular"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/JulioJavif/micro-fronts-angular","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JulioJavif%2Fmicro-fronts-angular","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JulioJavif%2Fmicro-fronts-angular/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JulioJavif%2Fmicro-fronts-angular/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JulioJavif%2Fmicro-fronts-angular/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JulioJavif","download_url":"https://codeload.github.com/JulioJavif/micro-fronts-angular/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JulioJavif%2Fmicro-fronts-angular/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273838359,"owners_count":25177161,"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","status":"online","status_checked_at":"2025-09-05T02:00:09.113Z","response_time":402,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":"2025-02-11T16:43:37.623Z","updated_at":"2026-05-15T12:03:00.266Z","avatar_url":"https://github.com/JulioJavif.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Conexión de frontend con microfront por medio de _module federation_.\n\nSeguir los pasos encontrados en el siguiente repo hasta el encabezado (__Activación de la federación de módulos para proyectos angular__): [Github](https://github.com/jimyhdolores/demo-microfrontend-multirepo-angular-modulefederation)\n\nLuego configurar en _tsconfig.app.json_ en el atributo `files` la ruta del módulo que se va a exponer, por ejemplo:\n\n```json\n{\n  \"extends\": \"./tsconfig.json\",\n  \"compilerOptions\": {\n    \"outDir\": \"./out-tsc/app\",\n    \"types\": []\n  },\n  \"files\": [\n    \"src/main.ts\",\n    \"src/app/pages/products/products.module.ts\",\n  ],\n  \"include\": [\n    \"src/**/*.d.ts\"\n  ]\n}\n```\n\nHay que tener en cuenta que esta ruta es la misma que exponemos en el _webpack.config.js_\n\n```javascript\nmodule.exports = withModuleFederationPlugin({\n  name: 'test-mf',\n  exposes: {\n    './ProductsModule': './src/app/pages/products/products.module.ts',\n  },\n  shared: {\n    ...shareAll({ \n      singleton: true, \n      strictVersion: true, \n      requiredVersion: 'auto' \n    }),\n  },\n});\n```\n\n## Eso es todo para crear un microfront desde cero. 🤙\n### Para ejecutar los dos proyectos de este repo hacer `npm i` sobre cada uno y `ng serve`, ambos están ya configurados y se ejecutan sobre los puertos 4200 y 4201.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjuliojavif%2Fmicro-fronts-angular","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjuliojavif%2Fmicro-fronts-angular","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjuliojavif%2Fmicro-fronts-angular/lists"}