Estructura de un proyecto en Angular
Cuando creamos nuestro proyecto, el angular-cli nos crea muchos archivos y carpetas que son necesarios saber para qué existen, ya que a veces surgirán errores o necesidades que rondan sobre estos. Por eso, voy a realizar una introducción a la estructura de un proyecto en Angular.
Estructura de un proyecto en Angular
Esto es lo que nos genera el angular-cli al realizar un ng new. Como explicamos en la entrada anterior.
e2e: Contiene archivos para realizar test automáticos (test end-to-end). Se ejecuta con el comando ng e2e
node_modules: Aquí se encuentran todas las dependencias de nuestros proyecto.
src: Adentro de esta carpeta irá nuestro código de Angular. El cual en entradas posteriores crearemos.
.editorconfig: Es la configuración de nuestro editor de código.
.gitignore: Se guardan las rutas de los archivos que el git debe ignorar (por ejemplo la carpeta node_modules), angular-cli se encarga de generarlo automáticamente.
angular.json: Contiene la configuración de Angular, cómo su versión, los assets, etc.
package.json: Esta es la configuración de nuestra aplicación, podemos encontrar su versión, nombre, scripts para correr (La cual es muy útil si deseamos crear un script para ejecutar varios comandos a la vez), las dependencias que utiliza y muchas otras cosas geniales. Si quieren mas información, les recomiendo leer el siguiente post de medium.
README.md: En este archivo podemos colocar información sobre nuestra aplicación, así como también los pasos a seguir para poder realizar un deploy a producción o probarla. Este archivo lo lee GIT y lo muestra en nuestro repositorio.
tsconfig.json: Contiene la configuración de TypeScript.
tslint.json: Este archivo está relacionado el linter de Typescript, se usa para que nuestro código sea sostenible y mantenible.
Conclusión
Como podrán ver son muchos los archivos o carpetas que nos genera nuestro amado cli, cada una cumple su función, normalmente las que menos tocaremos serán el tsconfig.json y tslint.json, el resto estarán con nosotros a lo largo de nuestra estadía con Angular.
Nos vemos en la próxima entrada!