Angular 2. Entrega 3. Empezando con Angular. Creando el esqueleto con angular-cli

1. Construcción de código esqueleto.

Podemos utilizar :
1,Yeoman que es un generador de esqueleto de programación para cualquier lenguaje. Hay muchos generadores yeoman, y hay que comprobar que esten actualizados
2. Proyectos semilla (seed) de github. También hay muchos, y hay que verificar que esten al dia
3. Herramienta oficial Angular CLI.

Para instalar Angular CLI, parece ser que requiere npm version 3 o posterior, Si estamos trabajando con windows, seguramente Nodej no instaló las últimas versiones de npm, por tanto, hay que ejecutar PowerShell como administrador y desde ahí actualizar con estos comados:

Set-ExecutionPolicy Unrestricted -Scope CurrentUser -Force
npm install --global --production npm-windows-upgrade
npm-windows-upgrade

Ahora ya podemos instalar Angular CLI. Para ello ejecutamos (siempre que se pueda en modo sudo en ubuntu, o en modo administador en windows:

sudo npm install -g angular-cli

Ahora creamos un nuevo proyecto llamado ejem01

sudo ng new ejem01

Y esperamos a que cargue 150 MB de internet.

En modo administrador ejecutamos

sudo ng serve

y esperamos bastante tiempo y al final vamos al navegador y en localhost:4200 aparece

Abrimos con Atom la carpeta elem01. Y vemos:

1. e2e: carpeta de testing end to end.
2. tslint.json configuracion del lint de js para el tema de calidad de código.
3. src: carpeta con código de la aplicación.
4. README.md archivo de formato ligero mark-down para llevarlo a github.
5. karma.conf.js para configuración de testing
6. angular-cli.json: configuración de la propia herramienta.
7. package.jon: configuración del npm, definiendo dependencias
8. node-modules: carpeta con libreria y herramientas descargadas. Micael propone trasladarla al directorio padre para que pueda ser utilizada en todos los ej ca recursivamente hacia arriba. Ojo si hacemos esto habrá que hacer el npm install.

Hay que tener precaución para configurar los IDEs para ue cojan la version 2 de typescript. Para ello Micael buscaba en google "vscode typescript new version", siendo vscode el editor que el utilizaba.

Para publicar en producción hacemos:

ng build

que genera los ficheros en la carpeta dist. Estan planeando optimizar el codigo generado, pero de momento el resultado (main.bundle.js) ocupa 2,5 MB. Si buscas en google "tree shaking in angular 2" se pueden ver técnicas que reducen el código mediante la eliminación de los componentes no usados.

2. Configuración de Atom

Siguiendo las instrucciones de nuestro amigo Micael Gallego,  en su diapositiva 68/257 vamos a decirle a Atom que no genere los ficheros javaScript ya que los genera Angular-CLI.

{
  "compilerOptions": {
    "baseUrl": "",
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es6", "dom"],
    "mapRoot": "./",
    "module": "es6",
    "moduleResolution": "node",
    "outDir": "../dist/out-tsc",
    "sourceMap": true,
    "target": "es5",
    "typeRoots": [
      "../node_modules/@types"
    ]
  },
  "compileOnSave":false
}

Para ello, añadimos "compileOnSave":false al final del fichero tsconfig.json