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

Amar Kumar Ram

19 Aug 202303:22

Summary

TLDREn 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.

Outlines

00:00

📂 Creación de archivos y estructura de webpack

Se discute la creación de archivos y la estructura de webpack en un proyecto. Se menciona que se han creado tres archivos y se han actualizado cinco, incluyendo la configuración de webpack y el archivo bootstrap.ts generado. Además, se señala que el archivo men.ts ahora simplemente hace referencia a bootstrap.ts, que contiene todo el código que anteriormente estaba en el archivo .ts.

Mindmap

Keywords

💡Webpack

Webpack es un módulo de empaquetado y gestión de dependencias estáticos para aplicaciones web modernas. En el video, se menciona la creación de un archivo de configuración de webpack, lo que indica que se utiliza para manejar y optimizar la estructura de archivos de la aplicación.

💡Angular

Angular es un framework de desarrollo de aplicaciones web de código abierto desarrollado y mantenido por Google. El video se centra en la integración de Angular con una arquitectura de microfrontend, utilizando versiones anteriores a la 16, específicamente Angular 15.

💡Microfrontend

Microfrontend es un patrón de arquitectura de software que permite la construcción de una aplicación grande a partir de múltiples aplicaciones más pequeñas y autónomas. En el video, se discute cómo se implementa esta estructura en la aplicación, con la generación de archivos como 'bootstrap.ts'.

💡Bootstrap

En el contexto del video, 'bootstrap' se refiere a un archivo generado que contiene todo el código que anteriormente estaba en el archivo 'main.ts'. Este archivo es crucial para la inicialización de la aplicación y se menciona como parte de la estructura de microfrontend.

💡Angular.json

El archivo 'angular.json' es un archivo de configuración central en una aplicación Angular que contiene información sobre el proyecto, como la configuración de compilación y las rutas de archivos. En el video, se actualiza este archivo para asignar un puerto específico a la aplicación remota.

💡Puerto (Port)

Un puerto es un número de identificación de software que se utiliza en la capa de transporte de red para区分不同的 servicios o procesos en una computadora. En el video, se asigna el puerto 4200 al proyecto principal y el 4300 a la aplicación remota.

💡Custom Builder

Un 'custom builder' en Angular es una herramienta que permite la creación de compilaciones personalizadas de la aplicación. Se menciona en el video que se integrará un paquete de compilador personalizado para la aplicación remota.

💡Package.json

El archivo 'package.json' es un archivo que contiene información sobre los paquetes de un proyecto Node.js, incluyendo las dependencias y las scripts de construcción. En el video, se indica que la versión de Angular utilizada es la 15, como se muestra en este archivo.

💡Main.ts

El archivo 'main.ts' es el punto de entrada principal de una aplicación Angular que se utiliza para inicializar la aplicación. En el video, se menciona que este archivo ahora simplemente hace referencia al archivo 'bootstrap.ts'.

💡Remote App

Una 'remote app' se refiere a una aplicación que forma parte de la estructura de microfrontend y que se ejecuta de forma independiente. En el video, se discute cómo se asigna un puerto dedicado a esta aplicación y cómo se integra en la arquitectura general.

💡Integración

La integración en el contexto del video se refiere al proceso de combinar diferentes aplicaciones o componentes para formar una sola aplicación funcional. Se destaca cómo se integra la 'remote app' con el proyecto principal mediante la asignación de puertos y la estructura de archivos.

Highlights

Files have been created and updated with webpack configuration.

Bootstrap.ts file is generated, containing all the previous code from .ts files.

Men.ts file now only refers to the bootstrap.ts file.

Micro front-end architecture structure is being implemented.

Angular.json file has been updated to assign port 4200 for the project.

A dedicated port will be assigned to the remote app and integrated with a custom builder.

Server of the remote application is stopped for further configuration.

Command NG and add the rectangular hyphen Architects forward/slash/module by Direction is run.

Angular.json file of the remote app is updated to assign port 4300.

Custom builder packet is installed and executed for the remote app.

Web config.js file is generated in the remote app with the same structure as in the booster.

Bootstrap file is generated in the remote app, containing all the code of the main.ts file.

Main.ts file in the remote app now refers to the bootstrap file.

The development is using Angular 15, one version behind the latest Angular 16.

Further development will be covered in upcoming videos.

Queries can be asked in the comment section for any clarification.

The video encourages liking, sharing, and subscribing for future notifications.

The presenter signs off with a positive note, looking forward to the next video.