Resumen: crear proyecto básico de Angular usando la CLI, es decir, hacer un hola mundo con Angular o mejor dicho, Hola angular.

En este post veremos cómo comenzar un proyecto de Angular, cómo modificarlo y finalmente cómo “compilarlo” para tener una versión lista para producción.

Recuerda que el desarrollo de Angular se hace con la angular CLI; si no cuentas con ella mira aquí cómo se instala.

Los directorios

Angular no requiere ningún directorio especial; puedes generar tus proyectos en cualquier directorio. Yo recomiendo crear una carpeta o directorio destinada a guardar proyectos de Angular.

Después, abre el CMD y dirígete a ese directorio. En mi caso está en D:\desarrollo_angular

Crear proyecto de Angular

Para crear un proyecto con Angular ejecuta:

ng new nombre-del-proyecto

Eso va a crear un directorio con el esqueleto de la app de Angular. En mi caso ejecuto:

ng new hola-angular

Pues estoy haciendo una introducción a Angular. Se ve así:

Puede que se demore un poco. En mi caso me preguntó si quiero un sistema de ruteo, como es una app de introducción seleccioné la opción N.

Además, me preguntó por el sistema de estilos; elegí CSS.

Me parece que para terminar se me preguntó si quiero enviar estadísticas de uso a Google, seleccioné que no.

Al final tendrás un directorio en donde estará el proyecto de Angular; navega hasta el mismo con cd nombre-de-tu-proyecto

Servir proyecto de Angular

Como Angular tiene su propio sistema de generación de archivos para el navegador y también su forma de servir los archivos hay que usar el siguiente comando para iniciar el servidor y escuchar cambios:

ng serve

Recuerda: ese comando debe ser ejecutado en la carpeta de tu proyecto. Así como en la imagen:

En la consola verás que se está sirviendo en la ruta localhost:4200 puedes visitarla y ahí se irá refrescando tu proyecto; es decir, no tienes que estar presionando F5 para ver un cambio.

Detener servidor

Puede que esto ya lo sepas pero para detener el ng serve que acabas de iniciar puedes presionar CTRL + C y cuando se te pregunte si quieres detener el proceso selecciona que sí.

Nota: si lo apagas, puedes encenderlo de nuevo con ng serve y así infinitamente.

Modificar componente

Si ahora abres el proyecto con tu editor favorito verás algo así:

No te compliques por el momento. Ve a src/app/app.component.html, elimina el código que existe y coloca el siguiente (después guarda cambios):

<h1>Hola mundo. 5 + 5 = {{5+5}}</h1>

Todavía no nos metemos con programación usando Typescript ni nada de eso, solo estamos usando las plantillas de la vista.

Tu app debe verse así:

Has modificado correctamente tu app, de una manera muy básica, pero lo has hecho.

El index.html

El archivo raíz es el index.html ubicado en src. Dentro de él puedes cambiar algunas cosas como la base href o el idioma. Toda la app será montada dentro de las etiquetas app-root.

Compilar aplicación de Angular

Aunque se utiliza Typescript y cosas “complejas” para crear aplicaciones web con Angular, al final es JavaScript, CSS y HTML.

La CLI de Angular permite compilar el proyecto para que pueda ser servido en un servidor web. Para compilar tu app ejecuta (dentro de tu proyecto):

ng build nombre-proyecto -c production

El comando se encarga de compilar tu proyecto con la configuración production dentro del archivo angular.json la cual es la siguiente:

"configurations": {
  "production": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }
    ],
    "optimization": true,
    "outputHashing": "all",
    "sourceMap": false,
    "extractCss": true,
    "namedChunks": false,
    "aot": true,
    "extractLicenses": true,
    "vendorChunk": false,
    "buildOptimizer": true,
    "budgets": [
      {
        "type": "initial",
        "maximumWarning": "2mb",
        "maximumError": "5mb"
      },
      {
        "type": "anyComponentStyle",
        "maximumWarning": "6kb",
        "maximumError": "10kb"
      }
    ]
  }
}

En mi caso ejecuto ng build hola-angular -c production como en la imagen:

Ahora en el proyecto está la app compilada, dentro del directorio dist. Dentro del mismo estará un directorio con el nombre de tu app, y dentro de él, algo como lo siguiente:

El punto de entrada es el index.html; debes servirlo desde un servidor web por ejemplo usando Python o incluso Apache. Así es como se le distribuye la app final al usuario.

Nota final

En mi caso he servido la app compilada con Apache, pero había un problema por las rutas relativas. Para arreglarlo modifiqué el index.html cambiando el atributo href de base y al final quedó así:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>HolaAngular</title>
  <base href="./"><!--Aquí el cambio-->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

Es decir, en lugar de / coloqué ./