How To Deploy an Angular Application to GitHub

En este artículo, seguiremos un enfoque paso a paso para implementar una aplicación Angular en GitHub. Crearemos un proyecto utilizando Angular CLI y luego lo implementaremos en GitHub. Empecemos.

Step 1

Para crear un proyecto mediante Angular CLI. Ejecute el comando:

ng new demo

Debe asegurarse de que Angular CLI esté instalada globalmente en su máquina.

Step 2

Cambie el directorio a demo y abra el proyecto en VS Code o en cualquier otro IDE de su elección.  Modifique AppComponent para sumar, restar, multiplicar y dividir dos números, como se muestra en la siguiente lista:

export class AppComponent {
    title = 'Calculator App';
    num1: number;
    num2: number;
    result: number;
    add() {
        this.result = this.num1 + this.num2;
    }
    substract() {
        this.result = this.num1 - this.num2;
    }
    multiply() {
        this.result = this.num1 * this.num2;
    }
    divide() {
        this.result = this.num1 % this.num2;
    }
 
}

Como puede ver, ese AppComponent es muy simple y contiene código para realizar operaciones básicas de calculadora.

A continuación, modifique la plantilla AppComponent

<div class="container">
    <br />
    <div class="row">
        <h1>
            Welcome to {{ title }}!
        </h1>
    </div>
    <br />
    <div class="row">
        <div class="col-md-6">
            <input type="number" [(ngModel)]="num1" placeholder="Enter Number 1" class="form-control" />
        </div>
        <div class="col-md-6">
            <input type="number" [(ngModel)]="num2" placeholder="Enter Number 2" class="form-control" />
        </div>
    </div>
    <br />
    <div class="row text-center">
        <div class="col-md-3">
            <button class="btn btn-info" (click)='add()'>Add</button>
        </div>
        <div class="col-md-3">
            <button class="btn btn-info" (click)='substract()'>Substract</button>
        </div>
        <div class="col-md-3">
            <button class="btn btn-info" (click)='multiply()'>Multiply</button>
        </div>
        <div class="col-md-3">
            <button class="btn btn-info" (click)='divide()'>Divide</button>
        </div>
    </div>
    <br />
    <div class="row">
        <div class="col-md-5 col-md-offset-4">
            <h2>Result = {{result}} </h2>
        </div>
    </div>
</div>

Al igual que la plantilla de clase de componente, también es muy simple. Utiliza:

• ngModel para el enlace de datos bidireccional entre controles de entrada y propiedades
• Enlace de eventos para llamar a una función al hacer clic en el botón
• interpolación para mostrar el resultado

Step 3

Antes de publicar esta aplicación en GitHub, vamos a ejecutarla localmente. Para ejecutarlo localmente, ejecute el comando

ng serve

Su aplicación debe ejecutarse en el puerto predeterminado 4200 de localhost, como se muestra en la imagen a continuación:

Step 4

Para implementar Angular aplicación, primero cree un repositorio en GitHub. Para ello, vaya a https://github.com/ y haga clic en Nuevo repositorio.  Estoy creando un repositorio llamado "demo9".

Una vez creado el repositorio, use el comando git para agregar este repositorio como remoto al proyecto local. Para eso, ejecute el comando de la siguiente manera:

git remote add origin https://github.com/USERNAME/PROJECT_NAME.git

No olvide cambiar el nombre de usuario y el nombre del proyecto. Una vez que se agrega el repositorio remoto, puede verificarlo mediante el comando

git remote -v

Como salida, debería obtener el repositorio enumerado a continuación:

Step 5

Para implementar la aplicación Angular en GitHub, primero debe instalar angular-cli-ghpages globalmente:

npm install -g angular-cli-ghpages

Después de instalar ese ghpages, use Angular CLI para compilar el proyecto. Para eso, ejecute el comando como se muestra a continuación:

ng build --prod --base-href https://debugmodedotnet.github.io/demo9/

Asegúrate de que estás usando tu nombre de usuario de GitHub y el nombre del repositorio.  Después de ejecutar correctamente el comando, debe crear bundle.js como se muestra en la imagen a continuación:

Como último paso, ejecute el comando ngh –no-silent para publicar la aplicación como se muestra en la imagen a continuación:

Después de una publicación correcta, vaya a https://<nombre de usuario>.github.io/<reponame>/ para navegar a la aplicación.  Esto es todo lo que necesita hacer para implementar la aplicación Angular en GitHub.

¿Te ha gustado este post?

Si te ha gustado este post, compártelo. Además, si aún no has probadoInfragistics Ignite UI for Angular componentes, ¡asegúrate de hacerlo! Tienen 30+ componentes de Angular basados en material para ayudarlo a codificar aplicaciones web rápidas más rápido.