How To Deploy an Angular Application to GitHub

Neste artigo, seguiremos uma abordagem passo a passo para implantar um aplicativo Angular no GitHub. Criaremos um projeto usando Angular CLI e, em seguida, implantaremos isso no GitHub. Vamos começar.

Step 1

Para criar um projeto usando Angular CLI. Execute o comando:

ng new demo

Você precisa ter certeza de que Angular CLI está instalada globalmente em sua máquina.

Step 2

Altere o diretório para demonstração e abra o projeto no VS Code ou em qualquer outro IDE de sua escolha.  Modifique AppComponent para adicionar, subtrair, multiplicar e dividir dois números, conforme mostrado na listagem abaixo:

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 você pode ver, esse AppComponent é muito simples e contém código para executar operações básicas de calculadora.

Em seguida, modifique o modelo 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>

Como o modelo de classe de componente, também é muito simples. Ele usa:

• ngModel para ligação de dados bidirecional entre controles de entrada e propriedades
• vinculação de eventos para chamar uma função ao clicar no botão
• interpolação para exibir o resultado

Step 3

Antes de publicarmos esse aplicativo no GitHub, vamos executá-lo localmente. Para executá-lo localmente, execute o comando

ng serve

Seu aplicativo deve ser executado na porta padrão 4200 do localhost, conforme mostrado na imagem abaixo:

Step 4

Para implantar Angular aplicativo, primeiro crie um repositório no GitHub. Para fazer isso, navegue até https://github.com/ e clique em Novo Repositório.  Estou criando um repositório chamado "demo9".

Depois que o repositório for criado, use o comando git para adicionar esse repositório como remoto ao projeto local. Para isso, execute o comando abaixo:

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

Não se esqueça de alterar o nome de usuário e o nome do projeto. Depois que o repositório remoto for adicionado, você poderá verificar isso usando o comando

git remote -v

Como saída, você deve obter o repositório listado abaixo:

Step 5

Para implantar o aplicativo Angular no GitHub, você precisa primeiro instalar o angular-cli-ghpages globalmente:

npm install -g angular-cli-ghpages

Depois de instalar esse ghpages, use Angular CLI para construir o projeto. Para esse comando de execução, conforme mostrado abaixo:

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

Verifique se você está usando seu nome de usuário do GitHub e o nome do repositório.  Após a execução bem-sucedida do comando, você deve criar bundle.js conforme mostrado na imagem abaixo:

Como última etapa, execute o comando ngh –no-silent para publicar o aplicativo conforme mostrado na imagem abaixo:

Após a publicação bem-sucedida, navegue até https://<username>.github.io/<reponame>/ para navegar até o aplicativo.  Isso é tudo o que você precisa fazer para implantar o aplicativo Angular no GitHub.

Gostou deste post?

Se você gostou deste post, por favor, compartilhe-o. Além disso, se você ainda não fez check-outInfragistics Ignite UI for Angular Componentes, certifique-se de fazê-lo! Eles têm 30+ componentes de Angular baseados em materiais para ajudá-lo a codificar aplicativos da web rápidos com mais rapidez.