Estructura de un proyecto de Angular

En el artículo de Instalando Angular, creando un proyecto y arrancándolo en local ya vimos cómo crear y arrancar un proyecto en Angular.

En este artículo, nos basaremos en el estado en el que dejemos el artículo anterior. Cuando hemos creado el proyecto desde el Terminal con la instrucción ng install -g @angular/cli, hemos visto, que como nos iba generando la estructura de Angular:

El proceso de creación/construcción de una estructura de un proyecto se conoce bajo el término de scaffolding (andamienando), que se trata de explicar que se está (auto construyendo o auto montando) la estructura de nuestro proyecto.

Estructura de un proyecto de Angular

Si abrimos el proyecto con VSC, podemos ver su estructura:

  • e2e (e2e de “end to end”): contiene una serie de ficheros cuyo objetivo es realizar test automáticos, que simularán que un usuario real interactúa con nuestra app de Angular.

Para ejecutar los test e2e, ejecutamos el comando ng e2e, vamos a ver un ejemplo:

Vemos que el test ha finalizado en SUCESS, lo que significa que se ha ejecutado correctamente.

  • Node_modules tiene los paquetes (también conocidos como dependencias) instaladas en nuestro proyecto con el instalador de paquetes (npm) de node.

Un ejemplo puede ser la dependencia de @angular/cli que hemos instalado. Que tengamos muchas librerías en este directorio es bastante normal, y no nos debe de preocupar. Es más, son muchas las librerías que internamente requieren otras librerías para poder funcionar/trabajar por lo que si lo desplegamos es normal, que nos salga una lista sin fin de archivos.

  • src (src de Source): es el directorio sobre el que trabajaremos nosotros y que contiene los distintos módulos que dan forma a nuestra aplicación. Por el momento, solamente mostrarnos su directorio, pero no abrimos el melón de su estructura. Ya que tiene muchos conceptos a explicar y es mejor primero finalizar de explicar la estructura principal y, posteriormente, en otro artículo, nos detendremos a explicar cada uno de sus elementos más detenidamente.

Aunque todos los directorios/archivos son importantes, SRC es sin duda alguna uno de que más importancia tienen ya que, será el directorio sobre el que nos permitirá desarrollar nuestra aplicación de Angular. SRC, contendrá la mayoría de nuestro código. Si nos fijamos en el resto de archivos que hemos explicado y que aún nos queda por explicar, son archivos de configuración, testing, etc.

  •  .browserslistrc: es un listado sobre la que podemos definir la compatiblidad de los navegadores con nuestro proyecto de Angular.

De hecho, si nos adentramos en el propio archivo, podemos observar que podemos ver que nos aparece de forma predeterminada listado de compatibilidad de nuestra aplicación de Angular, realmente este listado surge de ejecutar el comando: npx browserlist que nos aparece dentro del archivo browserlistrc:

Si ejecutamos el comando nosotros desde nuestra terminal, podemos ver la lista esa lista de otra forma con el conjunto de navegadores que compatibles son compatibles en nuestro app de Angular:

¿Porque y para que se utiliza esto? Anteriormente, Angular transpilaba (traducía/compilaba) los archivos de TypeScript a la versión ES5 de JavaScript.

Como estamos viendo en las imágenes, la versión ES5 de JavaScript, es la versión de 2009. Y por tanto, era compatible con la inmensa mayoría de versiones de los distintos navegadores.

En la actualidad, Angular, por defecto ya no trabaja con ES5, y aunque lo podemos editar, ha empezado a dejar de trabajar con esta versión y, por tanto, de tener compatibilidad con algunas versiones prehistóricas de los navegadores. Para pasar a trabajar con ES6, renunciar a la compatibilidad de algunos navegadores es el precio que tiene que asumir a cambiar de mejorar su rendimiento subiendo un escalón en la versión de EcmaScript sobre la que trabaja.

De hecho, lo todo esto, lo podemos corroborar si vamos al archivo tsconfig.json y nos situamos sobre la key target que tiene un valor de ES2015 que es nada más y nada menos que el escalón del que hablábamos que acabábamos de subir, la versión ES6 de EmcaScript:

Si queréis indagar más en el tema os dejo varias fuentes:

  • .editorconfig: nos permite definir normas tanto genéricas como especificas:

    • [*] → genéricas para todos los archivos: Como el tipo de codificación que usaremos en el proyecto, el tamaño de la identación que usaremos, etc.
    • [*.ts] → particulares para los archivos con extensión .ts y, por tanto, archivos de TypeScript: Como por ejemplo que usaremos comillas simples en ese caso y se podría modificar por dobles, etc.
    • [*.md] → particulares para los archivos con extensión .md y, por tanto, archivos de MarkDown: como por ejemplo si existe longitud máxima de la línea, si se quitan los espacios en blanco finales, etc.

Nosotros podríamos configurar nuestras propias normas o modificar las existentes. Con el fin de que todos los programadores del proyecto utilicen las mismas convenciones a la hora de escribir.

  • .gitignore: contiene un listado de ficheros y directorios que no queremos que se suban al repositorio de git (como contraseñas, o el paquete de node_modules, etc.)

Así que, ya sabéis, si alguna vez te aparecen 5425 cambios en gitHub, posiblemente hayas subido el node_modules a vuestro repositorio de Git.

  • angular.json: este archivo contiene la configuración de Angular. Si nos metemos en el podemos ver que asocia y define muchos valores tales como: el nombre del proyecto, el HTML inicial que cargaremos, etc.

  • karma.conf.js: es el archivo de configuración para realizar testing con Karma. Karma, ha sido desarrollado por el equipo de Angular, y viene preinstalada en Angular junto a Jasmine, con el fin de que nos centremos en realizar los test y para que sea lo más sencillo posible ya viene autoconfigurada para que nosotros nos centremos solamente en nuestros tests.

La herramienta de testeo para realizar testing en Angular por defecto es Jasmine. Karma, se encarga de informarnos/mostrarnos los resultados de los test (que hemos realizado en Jasmine) en el navegador y, además, nos permite depurar el código.

Vamos a ver un ejemplo. Si vamos a la Terminal y ejecutamos:

Podemos ver que se nos abrirá una pestaña donde se muestran los test que se han realizado, y los resultados (que también podemos ver desde la ventana de terminal aunque de una forma menos específica).

Si queréis investigar más al respecto, os dejo un enlace a la web oficial de Karma

  • package.json y package-lock.json: el archivo package.json es un manifiesto (declaración pública) que nos informa sobre todas las dependencias que necesita nuestra aplicación de Angular para funcionar.

El package.json , tiene 3 secciones a destacar:

  1. Scripts: contiene un listado de métodos asociados a npm como start con el que ya hemos visto como arrancar una aplicación. También podemos añadir los nuestros.
  2. Dependencies: contiene las dependencias necesarias para la ejecución de nuestra aplicación. Como, por ejemplo: angular/router, angular/core, angular/forms, etc.
  3. DevDependencies: contiene las dependencias que vamos a usar durante el desarrollo de nuestra aplicación.

En cambio, el archivo package-lock.json nos muestra la versión específica que estamos usando actualmente en nuestro proyecto.

Como ya sabemos, el directorio node_modules, no se sube a Git. Y, por tanto, si alguien descarga nuestro proyecto, tendrá que descargar una a una todas las dependencias.

Por tanto, si no subimos las dependencias del proyecto ¿Como sabemos las dependencias que necesitamos? ¿Descargará la versión del package.json o la versión de package-lock.json? La respuesta que utilizar npm para responder a esa pregunta es ir al package.json y descargar sus versiones.

¿Y qué hará npm? En el inicio de cada una de las dependencias, del fichero de package.json, podemos ver que en su inicio empieza por ^o ~
esto quiere indicarle a npm que versión (version range) debe descargar.

“nombre-de-la-dependencia”: “(^|~|version)|url”

Son caracteres opcionales que definen como debe ser tratada esa dependencia la próxima vez que se corra npm install en el proyecto:

  • Si la versión tiene un ^: Se buscará la versión anterior a la dependencia le dice a npm que, si alguien clona el proyecto y lo ejecuta npm install, debe instalar la última versión menor. Por ejemplo:
    • “@angular/cli”: “~10.2.0” descargará la versión más reciente disponible que no superé la versión 10.X . Si por ejemplo existe una versión 10.5.3, descargará esa versión, pero no descargaría la versión 11.1.0. Algunos ejemplos más podrían ser:
      • ^1.2.3 : = >=1.2.3 <2.0.0
      • ^0.2.3 : = >=0.2.3 <0.3.0
      • ^0.0.3 : = >=0.0.3 <0.0.4
    • Si la versión tiene un ~: Se buscará una versión lo más cercana posible a la definida. Permite cambios a nivel de parche si se especifica una versión menor en el comparador. Permite cambios menores de nivel si no.
      • ~1.2.3: = >=1.2.3 <1.(2+1).0: =>=1.2.3 <1.3.0
      • ~1.2: = >=1.2.0 <1.(2+1).0: = >=1.2.0 <1.3.0(Igual que 1.2.x)
      • ~1: = >=1.0.0 <(1+1).0.0: = >=1.0.0 <2.0.0(Igual que 1.x)
      • ~0.2.3: = >=0.2.3 <0.(2+1).0: =>=0.2.3 <0.3.0
  • Si no tiene ningún símbolo: Se instalará la misma versión. Por ejemplo:
    • “@angular/cli”: “10.2.0” descargará especificamente la versión 10.2.0.

Aunque existen muchas más. Algunos ejemplos son:

  • < Menos que
  • <= Menos que o igual a
  • > Mas grande que
  • >= Mayor qué o igual a
  • =Igual. Si no se especifica ningún operador, se asume la igualdad, por lo que este operador es opcional, pero PUEDE incluirse.

Es posible que, en ocasiones, tantas versiones y tantas versiones nos puedan causar algún que otro problema, ya que los colaboradores del mismo proyecto pueden estar todos en diferentes versiones de dependencia.

Por ello, es package-lock.json el que cada vez que se descarga una versión almacena la versión actual sobre la que se está trabajando. Por si en caso de conflicto, esto, nos ayudará mejor a detectar cual puede ser el problema.

  • README.md es el archivo que suele visualizar en el repositorio a la hora de descargarlo. Suele ser una especie de guía que contiene los pasos o instrucciones de configuración de rutas, comandos de instalación, etc.

De hecho, si abrimos el fichero y le damos a Open Preview to the Side:

Podemos ver la vista previa del fichero:

  • tsconfig.app.json, tsconfig.json y tsconfig.spec.json: estos 3 ficheros nos permiten definir configuraciones para cuando realicemos la transpilación (traducción) de nuestro código. Este código no puede ser leído por el navegador por el momento ya que está en TypeScript (con extensión .TS) y una vez transpilado a JavaScript (con extensión .JS) y que ahora sí que puede ser leído por el browser.

El archivo tsconfig.json contiene la configuración general de escritura del código de TypeScript y principalmente destaca:

    • BaseUrl: nos sirve para indicarle la ruta raíz de nuestro proyecto
    • Modul: es la versión de EcmaScript sobre la que vamos a desarrollar nuestro TypeScript.
    • Target: es la versión a la que vamos a transpilar nuestro TypeScript, en este caso, ES2015 = EscmaScript 6 (se podría modificar como ya hemos visto anteriormente).

Los otros dos ficheros, vemos en ambos casos extienden del fichero anterior (tsconfig.json).

En el caso de tsconfig.app.json se relaciona con la aplicación de Angular (en modo normal), cargando sus clases y estableciendo el directorio de salida de la aplicación:

En cambio, tsconfig.spec.json, es la configuración de TypeScript para las pruebas de la aplicación.

  • tslint.json: dentro del fichero tslint.json, definimos una serie de reglas que se utilizaran durante el desarrollo de software para comprobar si el código fuente de TypeScript cumple con las reglas de codificación.

Por ejemplo, cuando escribimos código en TypeScript y el IDE se detecta un error, nos marca dicho error con una especie de subrayado en la parte inferior. Y si nos situamos encima, nos muestra más detalle sobre dicho error.

Espero que os haya quedado un poco más clara la estructura de Angular. Al principio suele ser bastante liosa y posiblemente tendréis que leer este artículo varias veces ya que es bastante duro de explicar. No quiero amargaros el momento, pero aún no hemos acabado con toda la estructura. Aun nos falta por explicar el directorio SRC, que como ya habíamos dicho anteriormente, lo explicaremos en la próxima lección. ¡Saludos y hasta pronto!

22 comentarios

  1. I visited multiple websites however the audio feature for audio songs present at this web page is
    actually excellent.

  2. Hi tһere to every body, it’s my first go to see of this bloɡ; this webpage contains remaгkable and in fact fine data in faᴠor оff visіtors.

    My web bloкg … check Over Here

  3. This piece of writing will assist the internet viewers for creating new
    website or even a weblog from start to end.

  4. You actually make it seem so easy with your presentation but I find this matter to
    be really something which I think I would never understand.
    It seems too complicated and extremely broad for me. I am looking forward for your next
    post, I will try to get the hang of it!

  5. I’d like to thank you for the efforts you’ve put in writing this blog.

    I really hope to check out the same high-grade blog posts by you later on as well.
    In truth, your creative writing abilities has inspired me
    to get my own website now 😉

  6. I pay a quick visit everyday some web sites and blogs to read
    posts, except this web site presents quality based
    writing.

    My blog post Arctos Portable AC Reviews (atkafasi.vip)

  7. When some one searches for his necessary thing, thus he/she wants to be available that
    in detail, therefore that thing is maintained over here.

  8. Excellent goods from you, man. I’ve understand your stuff previous
    to and you are just extremely excellent. I really like what
    you’ve acquired here, certainly like what you are
    saying and the way in which you say it. You make it enjoyable
    and you still care for to keep it wise. I cant wait to read much more from you.
    This is really a great website.

  9. My brother suggested I might like this web site.
    He was once entirely right. This publish truly made my day.
    You cann’t imagine just how so much time I had spent for
    this info! Thank you!

  10. We are a group of volunteers and opening a new scheme in our community.
    Your site offered us with valuable information to
    work on. You have done an impressive job and our entire community
    will be grateful to you.

  11. thank you for all your efforts that you have put in this.
    Very interesting information.

    Take a look at my page VikingXL Keto

  12. It’s actually a great and useful piece of information. I’m satisfied that you shared this
    useful info with us. Please keep us up to date like this.
    Thank you for sharing.

    Feel free to surf to my web-site; The Skin Company Anti Aging Cream

  13. Attractive portion of content. I just stumbled upon your blog and in accession capital to
    assert that I acquire actually enjoyed account your blog posts.
    Anyway I will be subscribing for your augment and even I fulfillment you
    get admission to persistently quickly.

  14. hello there and thank you for your info ? I have certainly picked
    up anything new from right here. I did however expertise several technical points using this web site, since I experienced
    to reload the web site lots of times previous to I could get it to load
    properly. I had been wondering if your hosting is OK?
    Not that I am complaining, but slow loading instances times will often affect your placement
    in google and could damage your quality score if ads and marketing with Adwords.

    Anyway I’m adding this RSS to my email and can look out for a lot
    more of your respective exciting content. Ensure that you update this again soon.

    Stop by my page: Green CBD Gummies

  15. I think other website proprietors should take this site as an model, very clean and wonderful
    user genial style and design, as well as the content.
    You’re an expert in this topic!

    Review my homepage – Libido Boost Male Enhancement Ingredients

  16. Really when someone doesn’t understand after
    that its up to other people that they will help, so
    here it occurs.

  17. Just wanna comment on few general things, The website design is perfect, the
    subject matter is really great :D.

    Feel free to visit my webpage – Testo Bull

  18. This site was… how do I say it? Relevant!! Finally I have found
    something which helped me. Thanks!

  19. I visited many websites but the audio feature for audio songs existing at this site is truly wonderful.

  20. Its such as you learn my thoughts! You seem to know so much approximately this, like you wrote the book in it or something.
    I believe that you just can do with some % to power the message house a bit,
    however instead of that, this is excellent blog.
    A great read. I’ll definitely be back.

    Look at my blog post: http://www.consulenzaleonardo.com

  21. My brother recommended I may like this website. He was entirely right.
    This put up actually made my day. You can not believe simply how so much time I had spent for this information! Thanks!
    scoliosis surgery https://coub.com/stories/962966-scoliosis-surgery scoliosis surgery

  22. What’s up mates, pleasant post and nice arguments commented at this place, I am in fact enjoying by these.

    Also visit my webpage: Libido Build Male Enhancement

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

La Ley 34/2002 nos obliga a avisarte de que usamos cookies propias y de terceros con objetivos estadísticos y de sesión y para mostrarte la 'publi' que nos da de comer. Tranquilo, este mensaje solo sale una vez. Más información

Java desde 0 comunica a los usuarios, a través de este aviso, que puede utilizar cookies cuando el usuario navega por las diferentes pantallas y páginas del sitio. Durante el uso de nuestra página Web usted acepta y autoriza expresamente el uso de cookies, de acuerdo con nuestra Política de Privacidad. Este sitio web utiliza las siguientes cookies propias: - Cookies de sesión, para garantizar que los usuarios que escriban comentarios en el blog sean humanos y no aplicaciones automatizadas. De esta forma se combate el spam. Este sitio web utiliza las siguientes cookies de terceros: - Google AdManager y AdSense: Utiliza cookies para mejorar la publicidad. Entre otros fines, suelen utilizarse para segmentarla según el contenido que sea relevante para los usuarios o su ubicación, mejorar los informes de rendimiento de las campañas y evitar mostrar anuncios que los usuarios ya hayan visto. Las cookies no contienen información personal identificable. Consulta cómo utiliza Google la información de sitios web o aplicaciones. y cómo bloquear determinados anuncios. - Google Analytics: Almacena cookies para poder elaborar estadísticas sobre el tráfico y volumen de visitas de esta web. Al utilizar este sitio web está consintiendo el tratamiento de información acerca de usted por Google. Por tanto, el ejercicio de cualquier derecho en este sentido deberá hacerlo comunicando directamente con Google. - Redes sociales: Cada red social utiliza sus propias cookies para que usted pueda pinchar en botones del tipo Me gusta o Compartir.

Cerrar