Configurando um ambiente de desenvolvimento Angular

Prof. Fausto Cintra/ outubro 4, 2019/ Desenvolvimento front-end/ 0 comments

Verificação dos pré-requisitos

Para trabalharmos com o Angular 9, será necessário que tenhamos instalado, primeiramente, o Node.js e o Yarn em suas versões corretas. Precisamos de:

• Node.js: versão >= 12.16
• Yarn: versão >= 1.22

Caso você já tenha o Node.js e/ou o Yarn instalados e deseje verificar a versão instalada, proceda da forma seguinte:

node --version
yarn --version

node --version
yarn --version

Se não houver esses programas instalados ou se eles não estiverem nas versões mínimas necessárias, será necessário baixá-los e instalá-los.

Instalação do Node.js

• Download do instalador do Node.js. Prefira sempre a versão LTS. Siga as instruções de acordo com o seu sistema operacional e a respectiva plataforma.

Instalação do Yarn

Embora o Yarn possa ser instalado via download a partir do site oficial, é mais prático fazê-lo utilizando o gerenciador de pacotes do Node.js.

npm install -g yarn

sudo npm install -g yarn

Instalação do Angular

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

npm install -g @angular/cli@latest

sudo npm install -g @angular/cli@latest

Verifique a versão instalada:

ng --version

ng --version

A versão esperada do Angular CLI, em setembro de 2019, é, pelo menos, 8.3.5.

Configurando o Yarn como gerenciador de dependências

Por padrão, o Angular 9 utiliza o npm como gerenciador de dependências. No entanto, o Yarn oferece mais vantagens desempenhando esse papel. Para fazer com que o Angular 9 passe a utilizar o Yarn como gerenciador de dependências, é necessário executar um comando de configuração.

ng config -g cli.packageManager yarn

ng config -g cli.packageManager yarn

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 --skip-install

ng new front-end --minimal --routing --skip-install

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 9.
• --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.
• --skip-install: normalmente, logo após a criação dos arquivos de projeto, o comando ng new já instalaria todas as dependências presentes no arquivo package.json do novo projeto. No entanto, para nos certificarmos de que o Yarn será usado para o gerenciamento das dependências, faremos isso mais adiante.

A execução do comando de criação do projeto fará algumas perguntas.

Which stylesheet format would you like to use? (Use arrow keys). Responda SCSS.

Essa etapa do processo é bem rápida. Em suma, ela irá criar uma nova pasta chamada front-end com alguns arquivos e pastas dentro.

Prosseguindo, precisamos entrar dentro dessa nova pasta criada e, agora sim, instalar as dependências do projeto. Para isso:

cd front-end
yarn install

cd front-end
yarn install

O comando yarn install passará a baixar as dependências do projeto e a instalá-las. ESSE PROCESSO É UM POUCO DEMORADO, dependendo da sua conexão de Internet. Tenha um pouco de paciência.

Se o processo de instalação de pacotes falhar (o que é relativamente comum, se a qualidade da conexão da Internet não for das melhores), NÃO ENTRE EM PÂNICO. Basta executar yarn install novamente.

Trocando em miúdos, simplesmente estamos fazendo com que o processo de download e instalação de dependências seja iniciado novamente.

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

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:

ng serve

ng serve

Esse comando irá compilar o projeto (demora um pouco na primeira execução). Ao final, abra seu navegador no endereço http://localhost:4200. Você verá a página padrão do projeto 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:

ng add @angular/material

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.
• ? Set up browser animations for Angular Material? (Y/n) Responda Y.

Instalando a biblioteca de ícones Material Icons

No terminal:

yarn add material-design-icons --network-timeout 1000000000

yarn add material-design-icons --network-timeout 1000000000

Há relatos de que a execução desse comando é demorada. É por isso que aumentamos o tempo de expiração da rede (--network-timeout).

Abra o arquivo src/styles.scss e acrescente a seguinte linha no início:

/* Acrescente a linha a seguir */ 
@import "~material-design-icons/iconfont/material-icons.css";

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

ng generate module material

Abra o arquivo src/app/material/material.module.ts e substitua seu conteúdo 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.