Instalar Angular 2 y hacer un Hola Mundo!!

Angular 2 es la nueva versión de AngularJS, es una tecnología muy interesante, veamos como instalar Angular 2 y hacer un Hola Mundo!!

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

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
cd    angular-two

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": "system",
    "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": {
    "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#7de6c3dd94feaeb21f20054b9f30d5dabc5efabd",
    "jasmine": "github:DefinitelyTyped/DefinitelyTyped/jasmine/jasmine.d.ts#7de6c3dd94feaeb21f20054b9f30d5dabc5efabd"
  }
}

5. Creamos el fichero package.json
Añadimos el archivo package.json a la raíz del proyecto, que nos sive 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": "angular2-victorroblesweb",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "typings": "typings",
    "postinstall": "typings install"
  },
  "license": "ISC",
  "dependencies": {
    "angular2": "2.0.0-beta.14",
    "systemjs": "0.19.25",
    "es6-shim": "^0.35.0",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.2",
    "zone.js": "0.6.6"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.0",
    "typescript": "^1.8.9",
    "typings":"^0.7.12"
  }
}

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 'angular2/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 iran 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 'angular2/platform/browser';
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 name="viewport" content="width=device-width, initial-scale=1"> 

    <!-- 1. Cargar librerías -->
    <!-- IE required polyfills, in this exact order -->
    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
    <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>   

    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>

    <!-- 2. Configurar SystemJS -->
    <script>
      System.config({
        packages: {        
          app: {
            format: 'register',
            defaultExtension: 'js'
          }
        }
      });
      System.import('app/main')
            .then(null, console.error.bind(console));
    </script>
  </head>

  <!-- 3. Mostramos la aplicación -->
  <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.

Podriamos 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 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

12 Comentarios

  1. Hola, estoy siguiendo tu curso de udemy pero me da un error al instalar npm install:

    emiperez@PLENOVEMI /cygdrive/c/wamp/www/angular-two
    $ npm install

    > angular2-victorroblesweb@1.0.0 postinstall C:\wamp\www\angular-two
    > typings install

    typings ERR! message Unable to resolve Typings dependencies
    typings ERR! caused by Unable to find “typings.json” from “C:\wamp\www\angular-two”

    typings ERR! cwd C:\wamp\www\angular-two
    typings ERR! system Windows_NT 6.1.7601
    typings ERR! command “C:\\Program Files\\nodejs\\node.exe” “C:\\wamp\\www\\angular-two\\node_modules\\typings\\dist\\bin.js” “install”
    typings ERR! node -v v6.2.1
    typings ERR! typings -v 0.7.12

    typings ERR! If you need help, you may report this error at:
    typings ERR!

    npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
    npm WARN notsup Not compatible with your operating system or architecture: fsevents@1.0.13
    npm WARN angular2-victorroblesweb@1.0.0 No description
    npm WARN angular2-victorroblesweb@1.0.0 No repository field.
    npm ERR! Windows_NT 6.1.7601
    npm ERR! argv “C:\\Program Files\\nodejs\\node.exe” “C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js” “install”
    npm ERR! node v6.2.1
    npm ERR! npm v3.9.3
    npm ERR! code ELIFECYCLE
    npm ERR! angular2-victorroblesweb@1.0.0 postinstall: `typings install`
    npm ERR! Exit status 1
    npm ERR!
    npm ERR! Failed at the angular2-victorroblesweb@1.0.0 postinstall script ‘typings install’.
    npm ERR! Make sure you have the latest version of node.js and npm installed.
    npm ERR! If you do, this is most likely a problem with the angular2-victorroblesweb package,
    npm ERR! not with npm itself.
    npm ERR! Tell the author that this fails on your system:
    npm ERR! typings install
    npm ERR! You can get information on how to open an issue for this project with:
    npm ERR! npm bugs angular2-victorroblesweb
    npm ERR! Or if that isn’t available, you can get their info via:
    npm ERR! npm owner ls angular2-victorroblesweb
    npm ERR! There is likely additional logging output above.

    npm ERR! Please include the following file with any support request:
    npm ERR! C:\wamp\www\angular-two\npm-debug.log

    Responder
    • Por favor utiliza el sistema de preguntas y respuestas del curso para hacer cualquier pregunta.

      Quizás sea recomendable actualizar 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 node de nuevo y repite este proceso.

      A ver si conseguimos solucionarlo.

      Saludos 😀

      Responder
  2. Ha funcionado a la perfección, muchas gracias!

    Responder
  3. Victor Buenas Tardes, yo estoy trabajando desde ubuntu, he instalado Angular2 y Angular CLI, Pero no me funciona ni el npm start, ni el ng serve que sugiere angular-cli. Este es el Error:

    farasi-id@farasiid-HP-ProBook-6550b:~/DesarrolloApp/Angula2/HolaMundo$ npm start
    npm ERR! Linux 4.4.0-21-generic
    npm ERR! argv “/usr/bin/nodejs” “/usr/bin/npm” “start”
    npm ERR! node v6.3.0
    npm ERR! npm v3.10.3

    npm ERR! missing script: start
    npm ERR!
    npm ERR! If you need help, you may report this error at:
    npm ERR!

    npm ERR! Please include the following file with any support request:
    npm ERR! /home/farasi-id/DesarrolloApp/Angula2/HolaMundo/npm-debug.log
    farasi-id@farasiid-HP-ProBook-6550b:~/DesarrolloApp/Angula2/HolaMundo$ npm -v
    3.10.3
    farasi-id@farasiid-HP-ProBook-6550b:~/DesarrolloApp/Angula2/HolaMundo$

    Responder
    • ¿Tienes problemas con la instalación de Angular 2?

      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 del vídeo de instalación o de este tutorial:

      http://victorroblesweb.es/2016/04/11/instalar-angular-2-hola-mundo/

      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:

      victorroblesweb.es/wp-content/uploads/2016/04/angular2-clean-install.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.

      Cursos de Angular 2 y aplicaciones SPA:
      https://www.udemy.com/desarrollo-web-full-stack-con-symfony3-y-angular-2/?couponCode=SAN-DI-WEB
      https://www.udemy.com/curso-de-angular-2-en-espanol-crea-webapps-desde-cero/?couponCode=AN2-DI-WEB2

      Saludos 🙂

      Responder
  4. “start”: “concurrently \”npm run tsc:w\” \”npm run lite\” “, cambia esta linea en package.json

    Responder
    • Habéis conseguido que funcione en linux

      Responder
      • ¿Tienes problemas con la instalación de Angular 2?

        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 del vídeo de instalación o de este tutorial:

        http://victorroblesweb.es/2016/04/11/instalar-angular-2-hola-mundo/

        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:

        victorroblesweb.es/wp-content/uploads/2016/04/angular2-clean-install.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.

        Cursos de Angular 2 y aplicaciones SPA:
        https://www.udemy.com/desarrollo-web-full-stack-con-symfony3-y-angular-2/?couponCode=SAN-DI-WEB
        https://www.udemy.com/curso-de-angular-2-en-espanol-crea-webapps-desde-cero/?couponCode=AN2-DI-WEB2

        Saludos 🙂

        Responder
  5. Para los que estén teniendo problemas con el comando “typings install”, que les salta “No dependencies”:
    En el archivo typings.json cambien “ambientDependencies” por “globalDependencies”.

    Responder
  6. Hola, estoy siguiendo tu curso, pero me da este error al momento de dar npm install despues de crear los archivos json, alguna sugerencia?

    npm ERR! Windows_NT 6.1.7601
    npm ERR! argv “C:\\Program Files\\nodejs\\node.exe” “C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js” “install”
    npm ERR! node v6.9.4
    npm ERR! npm v3.10.10
    npm ERR! code SELF_SIGNED_CERT_IN_CHAIN

    npm ERR! self signed certificate in certificate chain
    npm ERR!
    npm ERR! If you need help, you may report this error at:
    npm ERR!

    npm ERR! Please include the following file with any support request:
    npm ERR! C:\wamp\www\curso-angular\npm-debug.log

    Responder
    • Pon tus preguntas en el panel de preguntas y respuestas dentro del curso en Udemy, ahí serán atentidas al instante.

      Saludos 🙂

      Responder
  7. Buenas noches.
    Muy agradecido con la secuencia que sugieres para la instalacón y puesta en marcha del primer proyecto “hola”. Me funcionó perfecto en windows 10. Es mi primer contacto con angular 2, y quiero aprenderlo. Volveré por este blog.
    Gracias

    Responder

Poner un comentario

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