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

plate

Esta sección está disponible solo para usuarios con suscripción. Por favor, mejora tu plan para acceder a esta parte.

Mejorar ahora

Mindmap

plate

Esta sección está disponible solo para usuarios con suscripción. Por favor, mejora tu plan para acceder a esta parte.

Mejorar ahora

Keywords

plate

Esta sección está disponible solo para usuarios con suscripción. Por favor, mejora tu plan para acceder a esta parte.

Mejorar ahora

Highlights

plate

Esta sección está disponible solo para usuarios con suscripción. Por favor, mejora tu plan para acceder a esta parte.

Mejorar ahora

Transcripts

plate

Esta sección está disponible solo para usuarios con suscripción. Por favor, mejora tu plan para acceder a esta parte.

Mejorar ahora
Rate This

5.0 / 5 (0 votes)

Etiquetas Relacionadas
AngularMicrofrontendWebpackConfiguraciónBootstrapArchivosIntegraciónPuertosDesarrolloTecnología