2. Installed Custom Builder Package in Multi Repo Angular Project | Micro-frontend | Amar Kumar Ram

Summary

En este script de video se discute la creación y actualización de archivos en un proyecto de micro frontend utilizando Angular. Se menciona la generación de un archivo `bootstrap.ts` que contiene todo el código anteriormente presente en `main.ts`, lo cual indica una estructura de micro frontend. Además, se actualiza el archivo `angular.json` para asignar un puerto específico a la aplicación remota, que se establece en 4300. Se destaca la importancia de la integración del paquete de compilador personalizado y se hace un llamado a la acción para que los espectadores hagan preguntas en la sección de comentarios, compartan el video y se suscriban al canal para recibir futuras notificaciones. El video concluye con un mensaje positivo y un despedida cordial.

Takeaways

• 📁 Se han creado tres archivos y actualizado cinco en el proceso de configuración.
• 🚀 Configuración de Webpack: se ha creado un archivo de configuración de webpack y otro específico para la aplicación broad.
• 🔄 Se ha generado un archivo `bootstrap.ts` que contiene todo el código que anteriormente estaba en `main.ts`.
• 📄 El archivo `main.ts` ahora simplemente hace referencia a `bootstrap.ts`.
• 🌐 Se ha establecido un puerto asignado, 4200, para el proyecto host en `angular.json`.
• 🔩 Se planea asignar un puerto dedicado a la aplicación remota y se integra un paquete de compilador personalizado.
• 🛑 Se detendrá el servidor de la aplicación remota para realizar la integración.
• 🔍 Se abrirá el archivo `angular.json` de la aplicación remota y se buscará la asignación de puertos.
• 📌 Se asignará el puerto 4300 al proyecto de la aplicación remota en `angular.json`.
• 🤖 Se ha confirmado la instalación y ejecución del paquete de compilador personalizado.
• 🔄 En la aplicación remota, se ha generado una estructura similar a la del host, incluyendo un archivo `bootstrap.ts`.
• ⚙️ La versión actual de Angular es la 16, pero en el script se utiliza la versión 15.
• 📈 Se realizarán futuras mejoras y desarrollos en los próximos videos.

Q & A

¿Qué archivos se han creado y actualizado en el proceso descrito?

Se han creado tres archivos y actualizado cinco. Incluyen la configuración de webpack, el archivo bootstrap.ts generado y actualizaciones en el archivo angular.json y web.config.js.

¿Cuál es el propósito del archivo bootstrap.ts?

El archivo bootstrap.ts es generado para contener todo el código que anteriormente estaba en el archivo .ts principal. Actúa como el punto de entrada para la aplicación y es referenciado por el archivo main.ts.

¿Qué es la estructura de la arquitectura de microfrontend que se menciona?

La estructura de la arquitectura de microfrontend implica que cada aplicación (host y remote) tiene su propio punto de entrada y se ejecutan en diferentes puertos, facilitando la integración y el desarrollo modular.

¿Cuál es el puerto asignado al proyecto en el ejemplo?

El puerto asignado al proyecto en el ejemplo es el 4200, mientras que para la aplicación remote se asigna el puerto 4300.

¿Qué comando se utiliza para agregar un módulo en Angular?

Para agregar un módulo en Angular, se utiliza el comando 'ng add' seguido del nombre del módulo.

¿Qué versión de Angular se está utilizando en el ejemplo?

En el ejemplo se está utilizando la versión 15 de Angular, una versión anterior a la versión actual que es la 16.

¿Cómo se asigna un puerto dedicado a la aplicación remote?

Se detiene el servidor de la aplicación remote, se ejecuta el comando 'ng add' con la ruta del módulo y se edita el archivo angular.json para asignar un puerto específico al proyecto remote.

¿Qué archivo se edita para integrar el paquete de compilador personalizado en la aplicación remote?

Se edita el archivo angular.json de la aplicación remote para integrar el paquete de compilador personalizado.

¿Por qué se necesita un paquete de compilador personalizado en el proyecto?

Un paquete de compilador personalizado puede ser necesario para agregar características o configuraciones específicas que no están disponibles en los compiladores estándar, adaptándose mejor a las necesidades del proyecto.

¿Qué archivo se ve afectado por la integración de la arquitectura de microfrontend en la aplicación host?

El archivo main.ts se ve afectado, ya que pasa a referirse al archivo bootstrap.ts que contiene el código previamente incluido en él.

¿Cómo se puede seguir el progreso y las futuras actualizaciones de este tutorial?

Se puede seguir el progreso y las futuras actualizaciones suscribiendo al canal y activando las notificaciones para no perderse ningún video futuro.

¿Cómo se pueden hacer consultas o comentarios sobre el contenido del tutorial?

Se pueden hacer consultas o comentarios a través de la sección de comentarios del video, donde el creador proporcionará respuestas a las dudas.