Inicialización de Angular con GitLab y test-driven development
Resumen
Convertir una idea en un proyecto listo para producción comienza con una base sólida. Aquí verás cómo inicializar Angular, configurar GitLab y activar tests automatizados bajo un enfoque profesional de DevOps y test-driven development, optimizando el flujo desde la consola hasta el repositorio remoto.
¿Cómo iniciar Angular y el repositorio en GitLab de forma industrial?
Punto de partida claro y ordenado: crear el directorio de trabajo, generar la aplicación, correr pruebas y enlazar el repositorio remoto. La meta es dejar todo listo para colaborar y automatizar.
¿Qué pasos ejecutar en consola para crear y preparar el proyecto Angular?
Crear el directorio “Plazi GitLab Live” e ingresar a él.
Inicializar la aplicación indicando el nombre del proyecto: “Plazi DevOps”.
Responder el asistente de configuración y elegir trabajar con SAS.
Esperar la instalación de dependencias hasta que finalice.
Acciones clave mencionadas:
Seleccionar el preprocesador de estilos: SAS.
Mantener la estructura estándar de Angular para avanzar rápido.
¿Por qué activar test-driven development desde el inicio en DevOps?
Test-driven development es fundamental en DevOps porque habilita validación continua y prepara el terreno para CI. Angular incluye tests iniciales listos para correr.
Pasos señalados:
Cambiar al directorio correcto del proyecto “Platzi DevOps”.
Ejecutar los tests y verificar que compilen y corran.
Código utilizado:
npm test
Resultados esperados:
Compilación inicial exitosa.
Ejecución de tres tests activos.
¿Cómo visualizar la app en localhost 4200 con un servidor de desarrollo?
Después de cerrar los tests, levantar el servidor y abrir el navegador para verificar el arranque.
Código utilizado:
npm start
Luego visitar: localhost 4200. Verás un proyecto estándar de Angular listo para iterar.
¿Cómo configurar Git y conectar con GitLab de forma segura?
Con la app ya creada, el siguiente paso es ligar el repositorio local con GitLab. Angular genera un primer commit al inicializar; por eso, basta con ajustar el remote y empujar el código.
Pasos indicados:
Cerrar el servidor y limpiar la consola con clear.
Configurar el usuario global de Git: nombre “David Aroesti”.
Ejemplo de comando compartido:
git config user.name"David Aroesti"
Configurar el correo a utilizar.
Cambiar el origin para apuntar al proyecto de GitLab: “Platzi GitLab Live/Platzi DevOps”.
Enviar todo al remoto por SSH e ingresar la contraseña de la llave cuando se solicite.
Verificar en la interfaz con refresh.
Puntos clave en la plataforma:
Manejo de repositorios con vista a branches y tags.
Interfaz que facilita trabajo colaborativo con otros desarrolladores.
¿Qué habilidades y conceptos clave se ponen en práctica?
Este flujo refuerza la mentalidad de industrializar el código: pasar de artesanía a prácticas profesionales con automatización y control de calidad continuo.
Conceptos destacados:
DevOps: cultura de entrega continua soportada por pruebas y automatización.
Test-driven development: base para validar cambios y preparar CI desde el día uno.
Repositorio Git ya inicializado: Angular genera un commit inicial para arrancar rápido.
Remote origin en GitLab: configuración del remote y push por SSH.
Colaboración con GitLab: uso de branches, tags y flujo colaborativo.
Servidor local de desarrollo: arranque con npm start y verificación en localhost 4200.
Flexibilidad tecnológica: si no usas Angular, puedes optar por un framework de backend como Ruby o Express sin problema, manteniendo el enfoque profesional.
Próximos pasos: exploración de mesh requests para trabajo colaborativo.
¿Tuviste una experiencia distinta al inicializar o conectarte a GitLab? ¿Te surgieron dudas con los tests o el remote origin? Comparte tu caso y preguntas en los comentarios.
Para los que estamos en windows para instalar los gestores de paquetes:
Vamos a usar NodeJS y npm (gestor de paquetes y librerías)
Descargar versión LTS de
Instalar con aceptar y continuar
Al terminar de instalar abrir una consola de cmd y escribir el comando
$ node –v $ npm –v
Para descargar el cli y poder usar el comando ng
$ npm install –g @angular/cli
Súper tu aporte, me sirvió un montón, muchas gracias!!!
Para el año 2023, les cuento que me enfrente a una incompatibildiad entre la ultima version de nodejs y la que descargaba de angular npm, por tanto me toco bajarme de version en nodejs para pasar rapido el ejerrciio. Por tanto en el momento que lo vayan a a hacer validen que la version de NodeJS y la version de NPM sea compatible con la version de Angular que se esta descargando. Al final trabaje con estas versiones:
y por ultimo importante validar donde queda instalado ng.cmd en mi caso quedo instalado en un subdirectorio .\node_modules.bin y me toco adicionarlo en la variabled e ambiente PATH para que me reconociera el comando ng sin inconvenientes
Es necesario tener instalado NodeJS y Angular/CLI. Estos son los pasos para conseguirlo en Ubuntu:
Obviamente antes de la clase habia que instalar Angular, npm, git. Detalles que no me gusto de la clase, utilizar material que de pronto otros no sabemos (Yo con angular ni idea)
pero el profe dijo que se podia hacer con lo que quieras. El punto es comenzar un proyecto. Yo lo hice con react que es lo que conozco.
Para aquellas personas que tiene el error de:
$ git push -u origin --all
git@gitlab.com: Permission denied (publickey).
fatal: Could not read from remote repository.
Usas windows? no me funciona en mi caso, me arroja que no estoy usando el comando bien, alguna sugerencia porfa :/
Si utilizo windows y si te sigue dando el mismo problema mañana podría buscar una manera de ayudarte.
yo tuve que realizar primero lo siguiente:
git init
git status
git add .
git commit -am "mensaje"
git remote add origin "url"
git remote -v
git push origin master
y ahí funcinó.
Todo parecía correcto pero me sigue marcando el error
git@gitlab.com:Permissiondenied(publickey,keyboard-interactive).fatal:Could not read from remote repository.Please make sure you have the correct access rights
and the repository exists.
al correr esta sentencia git push origin master
Hola Erica! Tal parece que no tienes bien configurada tu ssh public key. Igual te puede funcionar ver el curso de git y github antes de entrar de lleno a gitlab y devops
Yo venía de usar Github y me acabo de dar cuenta que puedo gestionar el mismo proyecto en ambos repositorios. Lo único que hago es tener nombres diferentes para el origin.
Todos los videos anteriores estuvieron muy bien. En este, creo que se debe considerar agregar una lección más, donde se le explique a los estudiantes como instalar angular y posibles dependencias mínimas. Yo siempre trabajo con Vue y no conozco mucho de angular
Para los que no tengan conocimientos de como instalar Angular, les comparto este tutorial, siguiendo las instrucciones tendrán su equipo ambientado y listo para seguir con el curso.
Tutorial
parece que y no esta disponible
Para instalar angular
npm install -g @angular/cli
si tienes instalado homebrew el comando es:
brew install angular-cli
En mi me solicitó el passphrase

Repositorio remoto
ya tenes un repositorio remoto agregado.
para ello tenes que modificar el "origin" o agregar un nuevo "origin"
ejemplo para remplazar el repositorio remoto actual.
git remote set-url origin <url-repositorio>
de esa manera vas a poder hacer push o pull. Ejemplo con la rama master.
git pull origin master
git push origin master
Para agregar otro repositorio en la nube podes hacer.
Una vez creado, tenes que ir al lugar en donde se guardo y copiar su contenido.
en linux se puede mostrar de la siguiente forma.
more ~/.ssh/*.pub
Despues el contenido lo pegas en Perfil->Claves SSH -> Agregar la clave ssh y listo.
Ahi deberias de poder hacer pull y push.
Opcion
Sino, te podes autentificar por HTTP.
Desabilitando la autentificacion de SSL en git.
git config http.sslVerify false
de esta forma te podes autentificar usando tu nombre de usuario y contraseña de gitlab.
@SistemasCBC mucho cuidado con mostrar las llaves con more o abrirlas con algun editor de texto, puede llegar a ser inseguro. La mejor practica a mi criterio para copiar las llaves es con el comando xclip
Ejemplo:
xclip -sel clip <~/.ssh/id_ed25519.pub
Más información aquí:
Vengo del curso de git y github profesional 2019 y encaja perfectamente con este curso, muy recomendados ambos!
Exitos!!
Ayuda por favor, cree un proyecto en GitLab, en mi PC cree un html, ejecuté el comando "git init", posteriormente la configuración de use.name y user.email. Posteriormente la secuencia de comandos "Push an existing folder" y en el último comando "git push -u origin master", digito usuario y contraseña, pero me genera el siguiete mensaje: "remote: HTTP Basic: Access denied" "fatal: Authentication failed..." podrían ayudarme para saber q estoy haciendo mal? JAS.
Hola @jahirsaaverdra.
Intenta esto:
Sucede cada vez que me veo obligado a cambiar la contraseña de Windows y ninguna de las respuestas anteriores me ayudó.
Prueba la siguiente solución que funciona para mí:
Vaya al Administrador de credenciales de Windows . Esto se hace en un EN-US Windows presionando la tecla de Windows y escribiendo 'credencial'. En otras variantes de Windows localizadas, debe usar el término localizado (consulte los comentarios para ver algunos ejemplos).
Alternativamente , puede utilizar el acceso directo control /name Microsoft.CredentialManageren el cuadro de diálogo Ejecutar (WIN + R)
Edite la entrada git en Windows Credentials, reemplazando la contraseña anterior por la nueva.
En caso que no te funciones prueba lo siguiente:
git config --system --unset credential.helper
luego ingrese una nueva contraseña para el servidor remoto Git.
Aquí la fuente.
Espero que te funcione esa soluciones en caso que no te funcione comentarlo y intentare ayudarte a encontrar solución a tu problema.
Hola
ayuda este video no lo puedo ver no carga indica problemas con el servidor
Estoy teniendo el mismo problema, aparece "The media could not be loaded, either because the server or network failed or because the format is not supported."
Pero me marcó error al hacer el push, el error fue:
git@gitlab.com: Permission denied (publickey,keyboard-interactive).
Entonces al leer algunos comentarios de la comunidad use:
y listo! Subí mi proyecto de Flask.
Practicamente solo reemplace git push -u origin master por git push -u origin --all
Estoy usando Ubuntu.
si les sale Command not found cuando ejecutan ng new platzi-devops, lo que deben hacer es antes instalar angular con el comando:
npm install -g @angular/cli@latest
Chicos! Si tienen problemas con el acceso cuando intenten hacer el push, pueden usar esta opción:
Cuando les pida el usuario, agregar el usuario normal que tienen en Gitlab
Cuando les pida la contraseña, generen un token de acceso de esta forma:
User settings/ Access tokens
Add a personal access token
Es importante que seleccionen la opción read_repository y write_repository
Create access token
Lo copian y eso es lo que dan en la consola como contraseña
Después de investigar un buen rato antes de poder avanzar, encontré que en windows debo correr lo siguiente antes;
git config core.sshCommand “ssh -o IdentitiesOnly=yes -i ~/.ssh/data_rsa -F /dev/null”
Donde data_rsa es el nombre del archivo generado con la clave SSH.
Debe tenerse presente cual es el passphrase utilizado al generar el archivo