Instalar Angular 2 RC

Angular 2 es la nueva versión de AngularJS y ya casi tenemos la versión final, de momento ha salido la versión RC que presenta algunos cambios a la hora de instalar este framework.

Vamos a preparar el entorno de desarrollo para desarrollar aplicaciones web con Angular 2 RC.

1. Instalar Node.js
Lo primero que tenemos que hacer es instalar node.js para utilizar su gestor de paquetes npm. Lo puedes descargar e instalar desde https://nodejs.org/en/download/

2. Crear un directorio para proyecto Angular

mkdir angular-two-rc
cd    angular-two-rc

3. Crear el fichero tsconfig.json
Creamos el fichero tsconfig.json con el siguiente contenido, este fichero es la configuración para el compilador de TypeScript:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}

4. Añadimos el fichero typings.json.
Creamos el archivo typings.json este fichero también es para que TypeScript funcione correctamente:

{
  "ambientDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160317120654",
    "jasmine": "registry:dt/jasmine#2.2.0+20160412134438",
    "node": "registry:dt/node#4.0.0+20160509154515"
  }
}

5. Creamos el fichero package.json
Añadimos el archivo package.json a la raíz del proyecto, que nos sirve para definir las dependencias necesarias del proyecto y que el gestor de paquetes de node las gestione e instale lo necesario, le metemos el siguiente contenido:

{
  "name": "angular2rc-victorroblesweb",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "lite": "lite-server",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings"
  },
  "license": "ISC",
  "dependencies": {
    "@angular/common":  "2.0.0-rc.1",
    "@angular/compiler":  "2.0.0-rc.1",
    "@angular/core":  "2.0.0-rc.1",
    "@angular/http":  "2.0.0-rc.1",
    "@angular/platform-browser":  "2.0.0-rc.1",
    "@angular/platform-browser-dynamic":  "2.0.0-rc.1",
    "@angular/router":  "2.0.0-rc.1",
    "@angular/router-deprecated":  "2.0.0-rc.1",
    "@angular/upgrade":  "2.0.0-rc.1",
    "systemjs": "0.19.27",
    "core-js": "^2.4.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "^0.6.12",
    "angular2-in-memory-web-api": "0.0.9",
    "bootstrap": "^3.3.6"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.0",
    "typescript": "^1.8.10",
    "typings":"^0.8.1"
  }
}

6. Creamos el fichero systemjs.config.js
Este fichero es el fichero principal de configuración de Angular 2 y podríamos modificarlo para ajustarlo a nuestras necesidades, en nuestro caso lo dejamos por defecto.

/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function(global) {
  // map tells the System loader where to look for things
  var map = {
    'app':                        'app', // 'dist',
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs'
  };
  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { defaultExtension: 'js' },
  };
  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade',
  ];
  // Add package entries for angular packages
  ngPackageNames.forEach(function(pkgName) {
    packages['@angular/'+pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' };
  });
  var config = {
    map: map,
    packages: packages
  }
  System.config(config);
})(this);

Ahora instalamos todos las dependencias en el proyecto con el comando:

npm install

Ahora vamos a crear nuestro primer componente en Angular 2 (un componente es una función que nos permite cargar plantillas y es la forma principal de definir y controlar la lógica de una aplicación), para ello en la raíz del proyecto creamos el directorio app:

mkdir app
cd    app

Creamos un archivo llamado app.component.ts con la siguientes lineas:

// Importar el núcleo de Angular
import {Component} from '@angular/core';

// Decorador component, indicamos en que etiqueta se va a cargar la plantilla
@Component({
    selector: 'my-app',
    template: '<h1>Hola mundo con Angular 2 !! victorroblesweb.es</h1>'
})

// Clase del componente donde irán los datos y funcionalidades
export class AppComponent { }

Ahora creamos el fichero main.ts en el directorio app, básicamente se encarga de lanzar el framework al cargar la página:

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
bootstrap(AppComponent);

Ahora en la raíz del proyecto creamos el fichero index.html:

<html>
  <head>
    <title>Angular 2 - Hola mundo!</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
    <!-- 1. Load libraries -->
     <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>
  <!-- 3. Display the application -->
  <body>
    <my-app>Cargando...</my-app>
  </body>
</html>

Ahora compilamos y lanzamos la aplicación:

npm start

Ahora el compilador de Typescript va a estar revisando los cambios en el código para compilarlo y además se lanzará lite-server que cargará index.html y refrescará el navegador cuando haya cambios.

Podríamos entrar a la web desde http://localhost:3000/ que carga lite-server o accediendo directamente al directorio donde esté guardado el proyecto.

instalar angular 2

¿Tienes problemas con la instalación? Descarga este paquete con una instalación limpia de Angular 2: Angular 2 RC Instalación limpia Simplemente descomprímelo y con la consola entra dentro de el y lanza el comando npm start.

Más información:
https://angular.io/docs/ts/latest/quickstart.html

Victor

Autor: Victor

Desarrollador web - Formador online - Blogger

Compartir este post

3 Comentarios

  1. Hola Víctor, me da un error en la instalación de Angular2, lo tengo casi resuelto, en OSX parece ser necesario el comando

    sudo npm run typings install

    ¿Puedes echarme una mano?

    Gracias.

    Responder
    • Hola 🙂

      Paso 0: Comprobar que el nombre de los ficheros y carpetas es el correcto. Comprobar que la estructura de directorios es correcta. Ver donde estoy lanzando los comandos de instalación (el npm install se lanza en la raiz de la carpeta del proyecto) y el npm start NO se lanza dentro del directorio app si no desde la raiz del directorio de nuestro proyecto de Angular 2.

      Paso 1: Es recomendable actualizar NodeJS a su ultima versión estable si ya lo tienes instalado. Es necesario tener la versión 3 de npm, así que lo actualizamos lanzando el comando:

      npm install npm -g

      Una vez que termine el de ejecutarse el comando, comprueba que tienes la versión 3 de npm con el comando:

      npm -v

      Si no te aparece una versión 3, descarga e instala NodeJS de nuevo y repite este proceso.

      Una vez actualizado Node y NPM simplemente sigue los pasos de este tutorial.

      Paso 2: Si sigues teniendo problemas

      A veces puede darse el caso que nuestro sistema al instalar Angular 2 no genere el directorio typings el cual es un directorio necesario e importante para que funcione el framework. Si ves que no te ha generado este directorio lanza el siguiente comando:

      npm run typings install

      Y esto generará el directorio typings que incluye configuraciones del framework, de typescript, etc.

      Paso 3: Si aún así no lo has podido instalar correctamente, puedes descargar este zip:

      http://victorroblesweb.es/wp-content/uploads/2016/05/angular-rc.instalacion-limpia.zip

      Que viene con todo instalado, simplemente descomprímelo y con la consola de comandos (cygwin u otras) entra dentro de el y lanza el comando npm start.

      A ver si conseguimos arreglarlo.

      Saludos 😀

      Responder
  2. Hola victor, quisiera saber si es necesario utilizar un host para que funcione angular. Si no es necesario, que pasos me salto o agrego para que funcione.

    Responder

Poner un comentario

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