Estructura de un proyecto en Angular

4/21
Recursos

Angular posee desde el inicio de un proyecto muchos directorios y archivos que se generan por defecto al crearlo. Mira qu茅 es cada cosa:

Screenshot from 2022-03-18 15-17-44.png

De arriba hacia abajo:

  • node_modules: Todo proyecto de Javascript posee este directorio donde se almacenan las librer铆as y dependencias que se descarguen con NPM.
  • src: Directorio principal del proyecto donde encontramos:
    • app: Directorio donde guardaremos todo el c贸digo fuente de Angular.
    • assets: Directorio para im谩genes y otros recursos que la app necesita.
    • environments: Directorio de ambientes, por defecto viene con desarrollo y producci贸n.
    • favicon.ico: 脥cono por defecto que tendr谩 la pesta帽a del navegador.
    • index.html: Archivo HTML principal desde donde se construye toda la aplicaci贸n.
    • main.ts: Archivo principal para la configuraci贸n de Angular.
    • polyfills.ts: Librer铆a para que Angular funcione en navegadores viejos y que la aplicaci贸n sea retro compatible.
    • styles.scss: Archivo principal de estilos.
    • test.ts: Archivo principal para lanzar el ambiente de pruebas de Angular.
  • .browserslistrc: Lista de navegadores y sus versiones que permite configurar la compatibilidad de la aplicaci贸n con cada uno.
  • .editorconfig: Permite autoformatear los archivos, espacios, indentaci贸n, etc. Hay que tener instalado la extensi贸n en el editor.
  • .gitignore: Indicarle a GIT qu茅 archivos/directorios ignorar.
  • angular.json: Archivo principal con toda la configuraci贸n del proyecto Angular.
  • karma.conf.js: Archivo de configuraci贸n de Karma. Karma es un task runner para correr pruebas unitarias.
  • package-lock.json: Describe el las dependencias exactas que se generaron en la instalaci贸n del proyecto.
  • package.json: Archivo para el manejo de dependencias, scripts y metadatos relevantes para el proyecto.
  • README.md: Archivo markdown para la documentaci贸n del proyecto.
  • tsconfig.app.json: Archivo principal para la configuraci贸n de TypeScript.
  • tsconfig.json: Extensi贸n con m谩s configuraciones de TypeScript.
  • tsconfig.spec.json: Configuraci贸n de TypeScript pero para el ambiente de pruebas.

Aporte creado por: Kevin Fiorentino.

Aportes 17

Preguntas 5

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

A los amantes de platzi 馃挌 les recuerdo que con amor lanzaron un tema de VSCode para nosotros.

PlatziTheme

RESUMEN:

鈥 src
Aqui se encuentra el coraz贸n del proyecto, est谩n los componentes, htm, css, etc.

鈥 .browserslistrc
Indica a angular en que versiones de navegadores tiene que ser compatible tu aplicaci贸n.

鈥 .editorconfig
Tiene que ver con el trabajo en el equipo, ver el mismo espacio de identaci贸n, etc.
Para que este archivo funcione se debe tener un plugin en el VSCode: EditorConfig for VS Code

鈥 tsconfig.json
Tiene que ver con la configuraci贸n de angular con tipescript.
Este archivo nos dice como va a compilar, hacia donde va a transpilar los archivos, que versi贸n vamos a utilizar de JavaScript, ver algunos compiladores de angular.

鈥 angular.json
Aqui podemos manejar diferentes ambientes, como por ejemplo para realizar pruebas(tester), tambi茅n para algunas configuraciones de compilaci贸n de angular.

鈥 karma.conf.js
Configuraci贸n para correr pruebas unitarias.


鈥 .nvmrc
Este archivo debemos agregarlo, indica cual es la versi贸n de node recomendada para correr el proyecto.


PLUGIN+:
-> Angular Language Service
-> Ayuda que la experiencia con angular sea increible.

El archivo .nvmrc est谩 brutal, no lo conoc铆a jeje

Si tienes diferentes versiones de node y adem谩s tienes el nvm (node version manager)
puedes creas el fichero
.nvmrc
donde podr谩s indicar la versi贸n recomendada de node para correr este proyecto.

Para ver que versi贸n tienes en la consola pones

node -v

y copias y pegas este valor en el fichero, en mi caso es v14.17.6

Hab铆a aplazado el aprender Angular, por fin tome la decisi贸n y me esta gustando.

Angular por defecto trabaja con typescript

En esta nueva aventura lo importante es seguir y mejorar.

Poniendo esta instrucci贸n en Visual Studio Code instalas el plugin mencionado
Ctrl+P

ext install EditorConfig.EditorConfig

Me encanta como explica la manera de crear un proyecto Angular

Para copiar la version de node en el .nvmrc, pueden usar el siguiente comando

node -v >  .nvmrc 

Que buen nombre que escogieron para las pruebas, Karma, lo que no hagas bien hoy lo pagaras manana

miren mi pagina en mi perfil. creo que lo hice lo mejor que pude con comandos. dios los bendiga a todos.

Plugin Angular Language Service
instalas el plugin
Ctrl+P

ext install Angular.ng-template

Supongo que .editorconfig es como prettier, esto tiene q ver con el trabajo en equipo, es una normativa, una forma de tener reglas claras dentro del equipo de desarrollo.

.editorconfig nos sirve para dejar una normativa para el equipo de desarrollo que vaya a trabajar en el proyecto

The language service extension relies on the @angular/language-service and typescript packages for its backend. @angular/language-service is always bundled with the extension, and is always the latest version at the time of the release. typescript is loaded, in order of priority, from:

The path specified by typescript.tsdk in project or global settings.
(Recommended) The version of typescript bundled with the Angular Language Service extension.
The version of typescript present in the current workspace鈥檚 node_modules.
We suggest not specifying typescript.tsdk in your VSCode settings per method (1) above. If the typescript package is loaded by methods (1) or (3), there is a potential for a mismatch between the API expected by @angular/language-service and the API provided by typescript. This could lead to a failure of the language service extension.

For more information, please see #594.

Installing a particular release build
Download the .vsix file for the release that you want to install from the releases tab.

Do not open the .vsix file directly. Instead, in Visual Studio code, go to the extensions tab. Click on the 鈥溾︹ menu in the upper right corner of the extensions tab, select 鈥淚nstall from vsix鈥︹ and then select the .vsix file for the release you just downloaded.