Configuración de GitLab CI para proyectos Angular

Automatiza con confianza: aquí verás cómo llevar una app de Angular a GitLab CI paso a paso, desde el flujo con issue y merge request hasta la configuración de Chrome Headless y un pipeline funcional con artifacts y cache. Sin trucos, solo lo esencial que se implementó.

¿Cómo iniciar el flujo con issue y merge request en GitLab?

Para asegurar trazabilidad y colaboración, se comienza creando un issue y luego un merge request que genera el branch de trabajo. Así cada cambio queda vinculado a una tarea clara.

¿Qué datos clave define el issue de automatización?

• Título: “Generar integración con GitLab CI”.
• Archivo a crear: .gitlab-ci.yml.
• Milestone: 1.
• Label: Infrastructure.
• Peso: 5.
• Acción: Submit para registrar y avanzar.

¿Cómo crear el merge request y el branch de trabajo?

• Generar el merge request desde el issue.
• Se crea el branch “5, Generar integración con GitLab CI”.
• Beneficio: un espacio aislado para cambios, listo para revisión.

¿Cómo preparar la consola y verificar el branch?

• Limpiar consola y cambiar a Master.
• Ejecutar: git pull para traer cambios remotos.
• Crear y ligar el nuevo branch al remoto.
• Verificar que estás en el branch correcto antes de editar.

¿Cómo adaptar los tests de Angular a Chrome Headless en CI?

En Continuous Integration no hay interfaz gráfica. Por eso se ejecutan los tests en Chrome Headless con un custom launcher “sin sandbox”. Esto evita fallas al correr en contenedores Linux.

¿Qué cambios aplicar en Karma con custom launchers?

• Cambiar el navegador por defecto a ChromeHeadlessNoSandbox.
• Declarar un custom launcher con base en ChromeHeadless y flag --no-sandbox.

// karma.conf.js
module.exports = function (config) {
  config.set({
    browsers: ['ChromeHeadlessNoSandbox'],
    customLaunchers: {
      ChromeHeadlessNoSandbox: {
        base: 'ChromeHeadless',
        flags: ['--no-sandbox']
      }
    }
  });
};

¿Cómo definir el script npm test:ci con watch false?

• Mantener el script de pruebas normal.
• Añadir un nuevo script para CI que ejecute una sola vez y use el navegador correcto.

{
  "scripts": {
    "test": "ng test",
    "test:ci": "ng test --watch=false --browsers=ChromeHeadlessNoSandbox"
  }
}

• Opcional: agregar bandera de Code Coverage si se requiere.

¿Qué verificación rápida asegura que los tests corren?

• Ejecutar: npm run test:ci.
• Si falla por nombre del navegador, validar coincidencia exacta: ChromeHeadlessNoSandbox. Corregir y volver a correr hasta ver los tests pasar.

¿Cómo escribir .gitlab-ci.yml con stages, artifacts y tests?

El objetivo es instalar dependencias, compartirlas entre jobs y ejecutar tests en Chrome Headless dentro del pipeline. Se usan dos stages: install y test.

¿Qué imagen y stages usa el pipeline?

• Imagen base: Node 11.1.0.
• Stages: install y test.

image: node:11.1.0

stages:
  - install
  - test

¿Cómo instalar dependencias y compartir node_modules con artifacts y cache?

• Job “Install dependencies”: corre npm install.
• Exporta artifacts de node_modules con expiración de 1 hora.
• Activa cache de node_modules para acelerar builds.

install dependencies:
  stage: install
  script:
    - npm install
  artifacts:
    expire_in: 1 hour
    paths:
      - node_modules/
  cache:
    key: node_modules
    paths:
      - node_modules/

¿Cómo instalar Google Chrome y ejecutar npm test?

• Job “test apps”: depende de “Install dependencies”.
• Antes del script, instalar Google Chrome: actualizar paquetes, añadir la llave pública y el repositorio estable, e instalar google-chrome-stable.
• Ejecutar el comando de pruebas: npm test.

test apps:
  stage: test
  dependencies:
    - install dependencies
  before_script:
    - apt-get update -y
    - apt-get install -y apt-transport-https
    # añadir llave pública de Chrome y repositorio estable
    # ejemplo:
    # - wget -q -O - <URL_llave_publica_chrome> | apt-key add -
    # - echo "deb [arch=amd64] <URL_repo_chrome> stable main" > /etc/apt/sources.list.d/google-chrome.list
    - apt-get update -y
    - apt-get install -y google-chrome-stable
  script:
    - npm test

Habilidades y conceptos practicados:

• Gestión de trabajo con issue, merge request y branch para trazabilidad y colaboración.
• Configuración de Karma con customLaunchers y Chrome Headless sin sandbox para entornos CI.
• Definición de scripts de npm para separar ejecución local y en CI (test vs test:ci).
• Creación de .gitlab-ci.yml con stages, jobs, artifacts, cache y dependencies para un pipeline reproducible.
• Instalación de Google Chrome en contenedores Linux para ejecutar pruebas de Angular basadas en navegador.

¿Tienes otra estrategia para organizar stages o para instalar Chrome en CI? Comparte tu enfoque y dudas en los comentarios.