Angular 13 más Module Federation, una guía práctica en 18 minutos en español

[@weincode]

Hola muchachos de antemano gracias por todo el apoyo 🥳, les dejo el link de Github github.com/Danielherresan/Module-Federation-Angular. si llegamos a los 100 likes en este video vamos por la segunda parte

[@JoseLuisMejiaRojas]

Llegamos !!!!!!!

[@weincode]

@@JoseLuisMejiaRojas XD siii ahora si es necesario la segunda parte 👍🏼💪🏼

[@jhonatancj5667]

@@weincode ya paso los 100 hace tres mese, hace falta el otro y éxitos hermano, buen video!

[@weincode]

@@jhonatancj5667 tienes razón 🤣🥲🥲 te prometo que estaré estructurando la parte dos. En estos días tuve mucha cosa de la comunidad de Flutter voy a retomar videos del mundo web y este tema siento que ha llamado mucho la atención. Un abrazo grande

[@danielfelipearteaga]

@@weincode Hola, tienen pensado profundizar en la arquitectura limpia y microfrontends con Angular?

[@juancarlosvaldes1708]

por favor mas videos de microfrontends en angular

[@oroyajs]

Muy buen video. Super bien explicado. Cabe recalcar que estamos en la version de angular 14 asi que hay que actualizar nuestra CLI para usar el module federation

[@santiagomonsalve7008]

Muchas gracias por el video, es de gran ayuda!

[@Isaac_cobos]

Wow gran explicación! es que lo haces sencillo como lo enseñas, eres una máquina! Ya estoy esperando el segundo video Daniel!!

[@weincode]

Gracias bro, de esto pienso hacer una play list para que tengamos más contenido del tema. Hoy publique el primer video introductorio

[@llian5646]

Me interesa conocer como sería en el caso de components, como sería para pasar parametros en todo caso!, Excelente video! un saludo!

[@luismunoz9135]

Muy buen video, me hubiera gustado ver como se comparte información entre microfrontends, hubiera estado top! gracias!

[@weincode]

Bro Que bueno Que te gustó el video, recuerda que comunicar micro fronts es un anti patrón. Solo en casos muy particulares lo podrías hacer. Tienes a disposición customEvents, sessions cookies y para información sensible un servicio que haga de puente entre mf

[@cristophercanoles3827]

Muy buen video, todo super claro, espero que subas mas contenido sobre module Federation, muchas gracias por el aporte

[@jorgeaugustogutierrezbande996]

tu contenido es genial y muy bien explicado. muchas gracias por toda esa infomracion valiosa que generas sigue asi un nuevo seguidor

[@weincode]

Gracias bro, esas palabras me dan mucho ánimo. En verdad a veces no es fácil sacar las fuerzas para sacar contenido 🥲. Un abrazo 🤗

[@javierescobar4103]

muchas gracias por tu contenido! me sirvió bastante!

[@weincode]

Me alegro que te gustara Javier, un abrazo grande

[@andresibarramunoz7948]

Hola buena noche, excelente video, podrías por favor en la segunda parte explicar cómo integrar por ejemplo un shared donde esté por ejemplo angular material y esto a su vez pueda importarse en los módulos de cada mf, y pues un ejemplo más amplio mezclando funcionalidades sencillas que se vea la comunicación entre los mf, gracias

[@MisteriosMisteriososExtranos]

Excelente video amigo

[@CarlosGomez-ck3ur]

Hola Wein, muchas gracias por el contenido que estas generando sobre microfrontends. Como tu mencionas tiene bastante tela para cortar y pues practicamente que eres pionero en materia de mf en lo que a contenido en habla hispana se refiere. Asi que sigue generando mas contenido y me gustaria en algun momento aportar a tu comunidad, actualmente estoy aprendiendo sobre la arquitectura de microfrontends y me parece genial como expones el tema.

[@rico3d2009]

Muito obrigado! Falo do Brasil e lhe agradeço muito por este vídeo, me ajudou muito!

[@AlonsoDanielBenitesSoto]

Hola amigo buena explicación, seria interesante una parte 2 de como seria exponiendo componentes del mf y que se muestren en el host, algo parecido a lo que hace un Iframe. saludos!!

[@weincode]

Súper muchas gracias por la sugerencia, que bueno que te gustó el contenido

[@luisbedoya7543]

De pronto a alguien le llego a pasar que el host tuviera una respuesta 403 cuando se ejecuta ng s host al final no genera error de compilacion pero si genera un 403 al cargar en el browser.

[@alzheimeerps5717]

Hacerlo dos botones desde angular otros dos cosas en react y otro en vue, por sencilla que sea ya nos ayuda a entender

[@leonardobarrios1509]

Gracias por compartir tu conocimiento. Una consulta en el caso que necesites token para las peticiones como recomiendas trabajar para que los micro front mantengan su funcionamiento independientes? realizar un componente adicional en el caso que se levante por separado para que obtenga dicho token?

[@weincode]

Cuando es información sensible es bueno tener un servicio que sirva como proveedor de información a los micro frontend 🫡

[@NgOliver11]

Hola Weincode excelente video, pero tengo mucha curiosidad de que salga la otra parte, ya que estoy en una investigación sobre como implementarlo como si fuera tipo (osea exponer un componente y usarlo normal tipo app-nombre-componente en el shell), también me causa curiosidad y estuve cacharriando y el proyecto padre (shell) el tiene acceso a todos los módulos de todos los micro fronteds por lo cual implementar componentes como tipo es súper fácil, pero no sé si esa sí sea la manera correcta de hacerlo.

[@weincode]

Oliver no me mates he estado a tope con un curso gratis que estoy publicando de Flutter, que bueno que te gustó el video. Pienso sacar un curso completo de micro frontend porque la verdad preguntan mucho del tema

[@elkingarzon4351]

me genera duda como se puede manejar si los proyectos están repositorios distintos

[@danielgutierrez4945]

puedes hacer un ejemplo usando como host Angular con React como remote, es que al parecer de esta manera en un poco mas complejo que usar la misma tecnilogia com host y como remote, por ejemplo usar React como host y remote tambien

[@nova3744]

Hola! Muchas gracias por la info, una pregunta al crearse los MF con el generate application todos compartirán el node-modules del workspace?

[@weincode]

Hola cómo vamos! Gracias a ti por el apoyo. Te comento que no se comparte el node modules completo sino lo que está configurado en shared

[@JuanDavidPinoReyes]

Hola, podrias traer un ejemplo de microfrontends usango angular elements

[@weincode]

Claro que si bro, gracias por la ayuda

[@MrBolamania]

Gracias por le vídeo, muy Interesante. Sabes si esa librería cuenta con buen soporte y mantenimiento? Antes de empezar una arquitectura es importante saber si irá evolucionando a medida que lo hace Angular ya que de lo contrario la arquitectura quedará deprecada. También me gustaría saber tu opinión opinión acerca de la comparativa de single-spa respecto module federation. Un saludo.

[@weincode]

Hola cómo vamos? Te doy toda la razón de hecho yo recomendaría fuertemente webpack 5 y module federation por la gran comunidad que tienen detrás de hecho angular por defecto trae webpack pero solo desde el angular json uno le especifica si desea uno personalizado . Si te refieres es a la librería de @angular-architects/module-federation lo único que está haciendo en este caso es extraernos el webpack por defecto y haciendo unas configuraciones predeterminadas (esta librería recibe 12k descargas semanales) es decir podrías hacer lo mismo del video pero editando manualmente el angular JSON. En cualquiera de los dos casos tanto single SPA como webpack module federation son buenas alternativas para federar componentes web, sin embargo aún no considero que estemos ante una tecnología con una gran empresa atrás para estandarizar la implementación de micro frontends. Ahora si comparo las dos tecnologías tenemos un tema a considerar importante single SPA su creador recientemente se quejó de que para el mundo angular había poca contribución y está solicitando apoyo con ello, pero cómo tecnología me parece una nota y que tiene unas maneras muy geniales para administrar y crear tus microfronts , single spa la veo ideal para federar elementos de buen tamaño. Con webpack lo veo más para federar módulos de tus páginas web que sean muy repetitivos pero que se puedan encapsular toda su funcionalidad en un componente. Por lo tanto, diría que ambas tecnologías se complementan y que deberíamos apoyar a los proyectos para que no pierdan fuerza . Ahora en un futuro cercano no me extrañaría que alguna gran compañía desarrolle una funcionalidad amigable para la implementación de mf. Por ahora los mejores referentes que tenemos son single spa, module federation y angular elements . Saludos y un fuerte abrazo 👍🏼

[@JulioGonzalez-bz4yf]

Mi pregunta es ¿puede tener cada micro frontend su propio sistema de rutas? En particular, en mi trabajo nos hacen manipular la ruta que se ve en el navegador para ocultar información. En el caso de micro frontend, las rutas que se ven en el navegador ¿son las del host o también la de los mf?

[@weincode]

Hola Julio, si se puede tener el sistema de rutas por micro front, de hecho es el deber ser. Las rutas que se ven son las del host y lo que configuras es desde el host que micro front mostrar ante x ruta.

[@ayrtontoffolleto1726]

hola una consulta ! si yo quisiera que mi microfront se renderice dentro de un div de mi home puedo hacerlo ?

[@weincode]

Hola claro que si se puede más ahora con las nuevas tecnologías analiza si lo que requieres es un webcomponent

[@charlyr2678]

TypeError: Cannot read properties of undefined (reading 'ɵmod') Uncaught SyntaxError: Cannot use 'import.meta' outside a module

[@MisteriosMisteriososExtranos]

Like para el próximo video

[@davidmauricioparraospina1215]

@weincode man como se puede exponer varios modulos del remote en el mismo microfrontend, gracias :)

[@weincode]

Ando modo evento y curso flutter pero también ando creando un curso para desarrolladores web con este tema

[@jespalza]

Hola amigo como estas? tengo un proyecto creado ya en funcionamiento y me pidieron agregarle un nuevo modulo el cual quiero que sea un MF, como son dos proyectos de angular diferentes ya hice todos los pasos pero no me redirecciona solo veo el consumo en la net que llama el archivo que expone el mf pero no pasa nada

[@juanmanuelvalderramarengif9633]

De casualidad sabes como resolver este error: ERROR Error: Uncaught (in promise): TypeError: fn is not a function while loading "./ShowinfoModule" from 5792 TypeError: fn is not a function while loading "./ShowinfoModule" from 5792

[@andresibarramunoz7948]

Buen día, de nuevo gracias por le vídeo, muy Interesante, estoy siguiendo todos los pasos, pero me pasa algo particular y es que cuando creo los proyectos host y mf y levanto con ng serve host o ng serve mf todo bien, pero cuando agrego a cada uno de los proyectos Module Federation e intento nuevamente ng serve host o ng serve mf, me genera el siguiente error This version of CLI is only compatible with Angular versions ^14.0.0, but Angular version 12.2.16 was found instead. Agradezco la ayuda.

[@luisbedoya7543]

me paso lo mismo me vi obligado si o si a subir a la version 14 de angular en el cli.

[@nova3744]

Tuve el mismo problema, no sé si halla una forma de cambiar esto sin tener que hacer un update a la versión de angular

[@jesusserna8819]

Muy buen video, ayuda a entender el module federation, me surgió una duda es necesario tener todas las apps o módulos federados en el mismo proyecto?

[@weincode]

Hola hermano que bueno que te gustó el video, te cuento que no es necesario. Puedes tener tus módulos en multirepo( un repo por módulo) o en monorepo (cómo se muestra en el video) si todo está bien configurado los dos escenarios funcionan

[@jesusserna8819]

@@weincode excelente, espero continúes con estos tutoriales, me interesa mucho este tema ñ.ñ

[@weincode]

@@jesusserna8819 claro que si 🎉, gracias por todo el apoyo

[@jaasielsosamorales6735]

Hola estoy teniendo un problema al momento de crear el WorkSpace, utilizo el comando "ng new workspace --createApplication=false" y me aparece esto Error: Unknown argument: createApplication, ¿Alguien sabe a que se debe?

[@weincode]

Bro en las versiones nuevas de angular ese comando cambió el nuevo comando es: ng new my-workspace --no-create-application