😎Estructura de carpetas ANGULAR / ¿Cuál estructura de directorios usar en Angular?

[@LeiferMendez]

𝘼𝙉𝙂𝙐𝙇𝘼𝙍 principiantes ⮕ link.codigoencasa.com/PROMO-INICIAL ANGULAR desde cero ⮕ bit.ly/367tJ32 NODE Express desde cero ⮕ bit.ly/3od1Bl6 MONGODB desde cero ⮕ bit.ly/3qh35wK SOCKET desde cero ⮕ bit.ly/3pg1Q02

[@navegante9650]

OJO hay que aclarar varios puntos importantes que le faltaron a tu video, y es que antes de la version 9, si existia la preocupacion de la carga de los componentes.(Que si creo muchos componentes en un solo modulo o muchos modulos para 1 o 2 componentes). Lo cierto es que en tiempo de ejecucion cargar 100kb 0 1mb no marca mucha diferencia pero cuando la aplicacion es enorme si lo hace. Es por ello que se implemento el TREE SHAKING, el cual es un mecanismo del motor IVY que optimiza el compilado de las aplicaciones angular 9+. Por lo que no interesa cargar 20 o 30 componentes en un modulo, ya que en el compilado solo se cargara lo que el modulo necesite en ese momento. Asi que crear 1 modulo para cada componente solo beneficia en tema de escabilidad y mantenibilidad, mas no de tiempos de ejecucion. Con respecto a la estructura de carpetas, pues depende del patron arquitectonico que uses y la logica del negocio.

[@LeiferMendez]

Saludos Miguel muchísimas gracias por tu comentario le aporta un gran valor al video, cada día aprendemos más y más 🎉🎉 lo tomaré en cuenta para próximas videos

[@luisgutierrez1481]

Llevaba ratos buscando una estructura bastante limpia y escalable. Gracias por el video.

[@lu9cyv241]

Hice tu curso en Udemy y este vídeo me ayudo a refrescar todo. Muchas gracias!!

[@dajanmedina930]

Excelente referencia Leifer hace 4 meses estaba buscando justo esto. Jaja y no encontré ese artículo pero ahora comprendo mejor lo que decía Dominicode con respecto a crear un módulo por componente. Exelente estoy muy feliz

[@LeiferMendez]

Saludos Dajan excelente Sisi cada día aprendemos más y es la idea 💡

[@dajanmedina930]

@@LeiferMendez Una pregunta y que recomiendas para los módulos de Angular Material?? Yo lo trabajaba como un modulo que podía importar en el modulo donde es requerido.. Pero con esta explicación que diste, no me parece bueno cargar todos los modulos del material cada vez que lo necesite algún componente?

[@RicardoPerez-if5vj]

Muchas gracias por compartir tu conocimiento, muy bien explicado!!

[@pecasuy]

Gracias por compartir tu tiempo y conocimiento,

[@JesusRamirez-ed6tt]

Justo mañana presentare la estructura del proyecto(carpetas), Gracias por compartir esos conocimientos Saludos

[@LeiferMendez]

Gracias a ti Jesús por comentar y formar parte de esta comunidad

[@Pablo-st4co]

Gracias Leifer. Con el standalone se soluciona el tedio de hacer módulos por cada componentes.

[@IChavezT]

Buen video Leifer. Se explican conceptos como el page y components que no los tenía muy claro. Por cierto, en un artículo de Tomas Trajan, leí que no era recomendable usar los servicios dentro de la carpeta/modulo shared ya que cada modulo cargado perezosamente y que importe el modulo shared creará una instancia del mismo servicio y que la mayoría de las veces queremos que los servicios sean globales . Gracias por compartir y enseñar tus conocimientos.

[@LeiferMendez]

Gracias Januz por tu comentario perfecto tu aportación si pudieras dejar el link de post sería excelente

[@IChavezT]

@@LeiferMendez Estoy tratando de compartir el link pero KZbin me está borrando la respuesta.

[@LeiferMendez]

tomastrajan.medium.com/how-to-build-epic-angular-app-with-clean-architecture-91640ed1656

[@antonycalderon6311]

Muchas gracias por compartir tu conocimiento.

[@LeiferMendez]

Gracias a ti Antony por comentar y pasarte

[@jampoolgarcia9969]

Gracias, buen aporte. La estructura es algo muy importante.

[@LeiferMendez]

Gracias por comentar Jampool siempre es importante tener en cuenta la estructura

[@daniwarindie]

@Leifer: Podrias hacer un curso de udemy con una app/caso real sobre gestion de almacen(warehouse) que hice en Django para empresa de automocion donde poder aplicar esa organizacion..etc.. muy buena explicacion.

[@davidadan2817]

Me parece que el tema de la carpeta shared, se resolvió ahora con el standalone component, donde podemos usar componentes sin declararlos en un módulo. Es cierto que está el Tree Shking de Ivy y todo eso, pero muy en el fondo, es cierto que si el proyecto es grande, algo te dice que no es necesario cargarte 30 componentes que tengas en el shared.module para solo usar uno... Por lo menos así lo veo. Creo que, ahora lo que tenga en el shared, lo usaría como standalone Solo una consulta, es que estoy en investigación del tema de arquitectura para proyectos angular. ¿Este video lo hiciste antes o después del que hiciste con Gentleman Programming de Clean Architecture? Por cierto, también soy un web developer venezolano en españa, un saludo🙌🏻

[@Adoracion-Alabanza]

Muy bueno Leifer, la gran pregunta cada ves que inicio un proyecto es que estructura de carpetas uso. 🙌

[@LeiferMendez]

Saludos Mariano esta es una muy usado aunque también existen otras espero traerlas próximamente

[@jaderguerra8436]

excelente video

[@malikkorrich9406]

Gracias

[@jemc300x]

Hola Leifer excelente video 😀👍, una pregunta cómo hacés la configuración para que al importar el SharedModule aparezca from '@shared/shared.module'? Y no from '../../shared/shared.module'.?

[@IChavezT]

Hola Enrique. Eso lo puedes hacer, agregando la propiedad "path" dentro de la propiedad "compilerOptions" en el archivo tsconfig.json. "compilerOptions":{ "path":{ "@shared/*": ["src/app/shared/*"] } }

[@LeiferMendez]

Excelente Januz colocando los alias

[@jemc300x]

Excelente muchas gracias Januz y Leifer.

[@nelsonscript]

Métele DDD y sin importar la versión de Angular va a estructurar mejor tu proyecto, de hecho ninguna estructura debería depender de qué tipo de detalle de implementación tecnológica sin importar si está hecho en React, Angular, Flutter etc....

[@urtaav639]

Ahora me quedo con la duda, es recomendable crear el típico módulo de angular material donde tienes todos los componentes de angular material y ese módulo me lo voy importando por todos lados, como debería ser ahí, importar cada módulo del componente donde lo necesite y no importar todo el modulo que en teoría tiene cosas que no ocupo?

[@JBoada30]

Gran video Leifer... Lo único que no me quedo muy claro fue el tema de shared module, entonces es mejor crear un module por cada componente compartido para evitar sobrecargar shared, para usarlos sería solo importarlos donde necesite ? Osea ya no importar el shared module completo ?

[@LeiferMendez]

Exacto Joel si tú aplicación la estás pensando para una escalamiento alto y desacoplado se suele usar de esa manera módulo por componente

[@tannynogales7080]

Excelente video Leifer, muchas gracias!! Una consulta.. ¿cómo puedo crear la estructura del video usando sólo cli? Por ejemplo: src/modules/home/home.module.ts (con lazy loading, por ende actualizando app-routing.module.ts) src/modules/home/home-routing.module.ts src/modules/payments/paginas/payments-stepOne/payments-stepOne.component.ts (actualizando home.module.ts y home-routing.module.ts)

[@LeiferMendez]

Gracias a ti por formar parte de la comunidad. Un saludo!! ✌

[@adamarimr]

Que gran video! Por cierto, donde consigues que te hagan esos iconos que tienes? o los haces en alguna página web? me interesa!👀

[@LeiferMendez]

Saludos Adamari los realiza un conocido 👋

[@adamarimr]

@@LeiferMendez Súper! Si tiene alguna página o algo déjala

[@Happy666gg]

ayuda, porque al crear un proyecto en angular no me aparece la carpeta environments?

[@darwinromero5928]

Excelente video. Una consulta, que herramientas es esa que usas para modelar la estructura de carpetas?

[@LeiferMendez]

Hola Darwin la herramienta que uso es whimsical.com/

[@pw4645]

Amigo, queria echarle un vistazo al proyecto de spotify pero requiere de un servicio en el puerto 3000 para funcionar y no lo vi en el repositorio, donde lo podria revisar? gracias

[@shonnee]

Hola, una consulta... si tengo un sitio web estatico (maquetado con html , css y js) donde deberia ir ubicado en mi app de Angular ? (es decir, que carpeta y subcarpeta deberia crear para alojar dicha referencia). "ejemplo, las vistas van en la carpeta views" - a esto me refiero - Ya que tengo que integrar todo en un mismo repo para que quede vinculado y no me doy cuenta donde iria ubicado. Gracias de antemano ^^

[@julianpinto6812]

Hola Leifer. la apliacion que creaste en angular (similar a spotify) no está en el curo de Angular de KZbin o si? Gracias de antemano.

[@LeiferMendez]

Hola Julian gracias por preguntar esa esta solo en Udemy link.codigoencasa.com/PROMO-INICIAL

[@julianpinto6812]

@@LeiferMendez Gracias bro. con respecto al video... entonces una buena practica sería crear un modulo por cada componente sin importar si el proyecto es pequeño como un portafolio? Así sean componentes tan simples como un botón? lo digo para empezar a usar buenas practicas desde el principio para hacerlo de forma natural en futuros proyectos. y de ser así, tendría una carpeta Shared pero que funcione de forma conceptual, con esto me refiero a que solo sería una carpeta para identificar los componentes que uso de forma compartida en el proyecto y no que sea un modulo para evitar el problema de peso al usar uno de esos componentes compartidos. Espero haberme explicado lo mejor posible. Gracas de antemano por tu tiempo. ¡Saludos!

[@luisdanielsolanovargaz6532]

Una pregunta como haces para que los comentarios al momento de escribir TODO: se remarque en un color, en tu caso amarillo...

[@LeiferMendez]

marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight

[@andresibarramunoz7948]

Buena Noche, Leifer una pregunta, yo tengo un proyecto el cual utilizo alias ejemplo @shared/shared.module, pero cuandoejecuto el ng test genera un error por que no encuentra la importación de los alias en la configuración normal que se crea en el spec por ejemplo si el componente es creado con éxito, no se si sabes cual pueda ser al solución o que se le debe configurar para que reconozca las pruebas, gracias

[@LeiferMendez]

Hola Andrés, asegúrate de que estés declarando los alias en el archivo principal del ts config. Un saludo!

[@alxx736]

Y el core ?

[@VANTYCSolutions]

vengo del futuro y ya no hay módulos - standalone : true.

[@jseh_]

Es como hace angular material :v

[@LeiferMendez]

Saludos José no suelo usar mucho material pero puede que sí tenga una estructura basada en este patrón gracias por comentar 👏👏