Configurando um ambiente de desenvolvimento Angular 10 no GitPod

Prof. Fausto Cintra/ outubro 18, 2020/ Desenvolvimento front-end/ 0 comments

Pré-requisitos

Este tutorial assume que você tenha configurado o serviço GitPod com permissão de escrita para um repositório do GitHub.

A configuração padrão do GitPod já traz a versão correta do Node.js exigida para o trabalho com o Angular 10, que é, no mínimo, a versão 10.13.0.

Você pode verificar a versão instalada do Node.js da seguinte forma:

node --version

Instalação da ferramenta de linha de comando do Angular

Trabalharemos com o Angular versão 10. Para instalá-lo:

npm install -g @angular/cli

Durante a instalação, será feita a seguinte pergunta:

• ? Would you like to share anonymous usage data with the Angular Team at Google under Google’s Privacy Policy at https://policies.google.com/privacy? For more details and how to change this setting, see http://angular.io/analytics. (y/N) Responda N. Trata-se de uma opção que permite ao Angular enviar dados de uso anônimos (telemetria) para o Google.

Verifique a versão instalada:

ng --version

A versão esperada do Angular CLI, em outubro de 2020, é, pelo menos, 10.1.7.

Instalação da extensão Auto Import no GitPod

O Angular 10 trabalha com componentes. Tais componentes, antes de serem utilizados, precisam ser importados nos arquivos de código, e, por vezes, determinar o caminho/diretório de onde deve ser feita a importação pode ser bastante trabalhoso.

Para facilitar essa tarefa, vamos instalar no GitPod a extensão Auto Import. Para tanto, basta seguir os passos assinalados na imagem a seguir.

Criação do projeto Angular

O comando ng é uma caixa de ferramentas que nos ajuda a trabalhar com o Angular. Uma de suas capacidades é a criação do projeto. Para a criação do projeto chamado front-end, devemos executar, o comando a seguir.

ng new front-end --minimal --routing

Note que adicionamos algumas opções ao comando básico de criação de projetos, que é ng new <nome-projeto>. Vamos às explicações:

• --minimal: isso desabilita os frameworks de teste de código. Esse é um tópico avançado, que será útil apenas após o aprendizado básico do Angular 10.
• --routing: assim como os projetos Express, o Angular também trabalha com rotas. Essa opção cria um módulo de código onde poderemos configurar nossas rotas mais facilmente.

A execução do comando de criação do projeto fará uma pergunta.

• ? Which stylesheet format would you like to use? (Use arrow keys). Usando as setas de direção do teclado, responda SCSS. O SCSS é um formato estendido de folhas de estilo que acrescenta ao CSS padrão alguns recursos bastante interessantes, alguns dos quais iremos usar durante o curso.

Essa etapa pode demorar um pouco, por causa da instalação das dependências. Ao final, terá sido criada uma nova pasta chamada front-end com alguns arquivos e pastas dentro.

Executando o projeto Angular

O comando anterior terá criado uma pasta chamada front-end com vários arquivos dentro dela. Portanto, de agora em diante, para trabalharmos como esse projeto, precisaremos estar dentro dessa pasta. No terminal:

cd front-end

O comando ng new, que executamos no passo anterior, gera um projeto Angular funcional. Para vê-lo, execute o seguinte comando no terminal:

npm start

Esse comando irá compilar o projeto (pode demorar um pouco na primeira execução). Aguarde a mensagem : Compiled successfully aparecer no terminal e depois use o botão Open Browser exibido pelo GitPod para abrir uma nova aba do navegador. Você verá uma página semelhante a essa:

Adicionando os componentes Angular Material ao projeto

Os componentes Angular Material foram desenvolvidos segundo as diretrizes do Material Design do Google. Utilizando esses componentes, nosso projeto terá uma série de benefícios, como a padronização da interface e a habilidade de deixar a aplicação “pronta” para ambientes mobile.

Para adicionar a biblioteca de componentes ao projeto, execute o comando abaixo no terminal. Caso você esteja executando seu projeto Angular, derrube-o antes teclando Ctrl+C no terminal.

ng add @angular/material

Esse comando também faz algumas perguntas. Responda conforme o modelo abaixo.

• ? Choose a prebuilt theme name, or "custom" for a custom theme: (Use arrow keys) Com a seta, escolha uma das opções. As duas primeiras são temas claros e as duas últimas, temas escuros.
• ? Set up global Angular Material typography styles? (Y/n) Responda Y. Isso irá configurar no projeto o uso de fontes do respositório do Google Fonts.
• ? Set up browser animations for Angular Material? (Y/n) Responda Y. Essa opção irá habilitar diversas animações que reagem às ações do usuário.

Adicionando um módulo para os componentes do Angular Material

Os componentes Angular Material são frequentemente utilizados, e, como qualquer componente da plataforma, precisam ser importados dentro de um módulo para funcionar.

Para evitar importar esses componentes um a um, é mais prático criar um módulo com todos os componentes do Angular Material e importá-los todos de uma vez para dentro do projeto.

Para tanto, gere um módulo vazio:

ng generate module material

Abra o arquivo src/app/material/material.module.ts e SUBSTITUA TODO O CONTEÚDO DO ARQUIVO pelo código seguinte:

import { NgModule } from '@angular/core';

//Angular Material Components
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatButtonModule } from '@angular/material/button';
import { MatInputModule } from '@angular/material/input';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatRadioModule } from '@angular/material/radio';
import { MatSelectModule } from '@angular/material/select';
import { MatSliderModule } from '@angular/material/slider';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatMenuModule } from '@angular/material/menu';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatListModule } from '@angular/material/list';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatCardModule } from '@angular/material/card';
import { MatStepperModule } from '@angular/material/stepper';
import { MatTabsModule } from '@angular/material/tabs';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatChipsModule } from '@angular/material/chips';
import { MatIconModule } from '@angular/material/icon';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatDialogModule } from '@angular/material/dialog';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatTableModule } from '@angular/material/table';
import { MatSortModule } from '@angular/material/sort';
import { MatPaginatorModule } from '@angular/material/paginator';

@NgModule({
  exports: [
    MatCheckboxModule,
    MatCheckboxModule,
    MatButtonModule,
    MatInputModule,
    MatAutocompleteModule,
    MatDatepickerModule,
    MatFormFieldModule,
    MatRadioModule,
    MatSelectModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatMenuModule,
    MatSidenavModule,
    MatToolbarModule,
    MatListModule,
    MatGridListModule,
    MatCardModule,
    MatStepperModule,
    MatTabsModule,
    MatExpansionModule,
    MatButtonToggleModule,
    MatChipsModule,
    MatIconModule,
    MatProgressSpinnerModule,
    MatProgressBarModule,
    MatDialogModule,
    MatTooltipModule,
    MatSnackBarModule,
    MatTableModule,
    MatSortModule,
    MatPaginatorModule
  ]
})
export class MaterialModule { }

Agora abra o arquivo src/app/app.module.ts e acrescente APENAS as linhas indicadas nos comentários (NÃO SUBSTITUA O CONTEÚDO DO ARQUIVO!!!):

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
// **** ACRESCENTE A LINHA ABAIXO *** 
import { MaterialModule } from './material/material.module';
@NgModule({
    declarations: [AppComponent],
    imports: [
       BrowserModule,
       BrowserAnimationsModule,
       // **** ACRESCENTE A LINHA ABAIXO E UMA VÍRGULA NA LINHA DE CIMA *** 
       MaterialModule
    ],
    providers: [],
    bootstrap: [AppComponent]
 });
 export class AppModule { }

PRONTO! Agora todos os componentes Angular Material já podem ser utilizados no projeto.

Alterando a forma como os arquivos de componentes são gerados

Desde a versão 9, o Angular passou a gerar um único arquivos para cada componente, contendo o template (HTML), a estilização (SCSS) e a lógica (Typescript). No entanto, essa não é a melhor abordagem para iniciantes pois, da forma padrão, o código HTML fica embutido dentro de uma string, sem destaque de sintaxe, dificultado a identificação de eventais erros.

Portanto, vamos alterar duas configurações do arquivo angular.json de modo a instruir o Angular a gerar arquivos separados para cada tipo de conteúdo de um componente. Tais alterações são demonstradas na imagem a seguir.