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.
¿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
15 julio, 2016
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
16 julio, 2016
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 😀
13 marzo, 2017
npm clean cache, esa fue mi solución al problema. saludos
16 julio, 2016
Ha funcionado a la perfección, muchas gracias!
18 julio, 2016
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$
22 septiembre, 2016
¿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:
Una vez que termine el de ejecutarse el comando, comprueba que tienes la versión 3 de npm con el comando:
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:
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 🙂
12 septiembre, 2016
«start»: «concurrently \»npm run tsc:w\» \»npm run lite\» «, cambia esta linea en package.json
21 septiembre, 2016
Habéis conseguido que funcione en linux
22 septiembre, 2016
¿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:
Una vez que termine el de ejecutarse el comando, comprueba que tienes la versión 3 de npm con el comando:
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:
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 🙂
7 enero, 2017
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».
27 enero, 2017
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
27 enero, 2017
Pon tus preguntas en el panel de preguntas y respuestas dentro del curso en Udemy, ahí serán atentidas al instante.
Saludos 🙂
18 febrero, 2017
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
15 octubre, 2017
Gracias!!!