Angular 2 | Conceptos previos, parte 2

Archivos de configuración

package.json

Configuración de detalle de dependencias del proyecto.

tsconfig.json

Directivas para el compilador Typescript.

systemjs.config.js

Información utilizada por el loader para saber donde encontrar los módulos requeridos.

Podemos crear y modificar estos archivos a mano, pero veremos como optimizar todo este proceso mediante Angular CLI.

Con el siguiente comando podemos crear el package.json, nos pedirá algo de info para inicializarlo

Luego podemos ir agregando dependencias, tanto en nuestro proyecto (descarga de archivos fisicos) como en el archivo de configuración con el siguiente comando

Lo importante de la sentencia anterior es que podemos incluir la cantidad de dependencias que querramos, para saber cuáles necesitaríamos podemos ir a https://angular.io/docs/ts/latest/guide/npm-packages.html#!#dependencies y el modificador –save lo que hace es agregar las dependencias instaladas al package.json

Angular CLI

Intérprete de línea de comandos incorporado en Angular que facilita el proceso de inicio de aplicaciones (estructura de carpetas, archivos, herramientas configuradas)

Instalación (el modificador -g indica que se instala de forma global)

Una vez instalador disponemos del comando “ng”, podemos encontrar la documentación acá: https://cli.angular.io/

Para crear un nuevo proyecto se usa

Esto creará una carpeta, y dentro la estructura inicial mencionada anteriormente. Algunas funcionalidades instaladas son:

  • Un servidor para servir el proyecto por HTTP
  • Un sistema de live-reload, para que cuando cambiamos archivos de la aplicación se refresque el navegador
  • Herramientas para testing
  • Herramientas para deploy

Vemos que esta estructura creada de forma automática, es la misma que creamos a mano en el apartado anterior para el archivo package.json.

Luego podemos entrar en el directorio creado y usar el comando serve para visualizar el proyecto sin necesidad de tener otro soft instalado (un servidor web por ejemplo)

Opcionalmente podemos indicarle el puerto en el que queremos que corra

Con un proyecto ya creado y configurado, para moverlo a otro servidor, podemos copiar todo salvo la carpeta node_modules y ejecutar $ npm install lo que creará dicha carpeta y descargará todas las dependencias declaradas en el package.json. Esto es muy útil, ya que dicha carpeta suele ser muy pesada.

Podemos valernos del CLI para crear el archivo de configuración de Typescript, por ejemplo

El listado de opciones lo encontramos en https://www.typescriptlang.org/docs/handbook/compiler-options.html

Podemos generar también el esqueleto de un componente:

Deja un comentario

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