Artigo original: How to build an Angular 8 app from scratch in 11 easy steps

O Angular é um dos três frameworks mais populares para o desenvolvimento para front-end, juntamente com o React e o Vue.js. A versão mais recente* é o Angular 8, lançado em maio de 2019.

Nota de tradução: no momento da criação do texto, a versão mais recente era a versão 8. No momento da tradução do artigo, a versão estável mais recente é a versão 12.1.4

Há muitos novos recursos e melhorias, tanto para a interface de linha de comando, quanto para o próprio framework. Isso resulta em um desempenho melhor e em pacotes de produção menores. Um recurso interessante é o comando ng deploy, que permite que os desenvolvedores criem e façam rapidamente o deploy de suas aplicações do Angular em provedores de hospedagem populares como o Firebase ou o GitHub.

Neste tutorial, faremos o passo a passo da criação de um exemplo de aplicação do Angular do zero usando várias APIs do Angular, como HttpClient e Material Design.

Aqui estão algumas das coisas que aprenderemos:

• Como fazer o mock de um servidor de API REST que usa dados falsos a partir de um arquivo JSON
• Como consumir a API REST de nossa aplicação do Angular 8 usando HttpClient
• Como lidar com erros do HTTP usando os operadores throwError() e catchError() do RxJS
• Como tentar novamente solicitações de HTTP que falham em condições ruins de rede e como cancelar solicitações pendentes usando os operadores retry() e takeUntil() do RxJS
• Como criar e utilizar os componentes e serviços do Angular
• Como configurar o roteamento e o Angular Material em nosso projeto e criar uma UI de aparência profissional com os componentes do Material Design
• Por fim, aprenderemos a fazer o deploy da aplicação no Firebase usando o comando ng deploy, disponível a partir do Angular 8.3.

Você também aprenderá por meio de exemplos:

• Como fazer rapidamente o mock de uma API REST com recursos do mundo real (como paginação, por exemplo), que você poderá consumir em sua aplicação antes de passar para o back-end da vida real quando estiver pronto.
• Como configurar a CLI do Angular
• Como inicializar seu projeto do Angular 8
• Como configurar o Angular Material
• Como adicionar componentes e roteamento no Angular
• Como gerar e usar serviços do Angular
• Como consumir APIs REST com o HttpClient do Angular
• Como criar e fazer o deploy de sua aplicação do Angular no Firebase.

Este tutorial é dividido nos seguintes passos:

• Passo 1 — Instalação da CLI do Angular 8
• Passo 2 — Criação do projeto do Angular 8
• Passo 3 — Inclusão do HttpClient do Angular
• Passo 4 — Criação de componentes
• Passo 5 — Inclusão de roteamento
• Passo 6 — Criação da UI com o Material Components do Angular
• Passo 7 — Criação do mock de uma API REST
• Passo 8 — Consumo da API REST com o HttpClient do Angular
• Passo 9 — Tratamento de erros do HTTP
• Passo 10 — Inclusão de paginação
• Passo 11 — Criação e deploy da aplicação do Angular com o Firebase

Vamos agora começar com os pré-requisitos!

Observação: você pode baixar nosso livro sobre o Angular 8: Build your first web apps with Angular 8 gratuitamente.

Pré-requisitos

Se quiser acompanhar este tutorial, é necessário ter:

• Conhecimento prévio de TypeScript.
• Uma máquina para desenvolvimento com o Node 8.9 ou superior e com o NPM 5.5.1 ou superior instalados. O Node é necessário em função da CLI do Angular. Você pode visitar o site da web oficial e pegar os arquivos binários para seu sistema. Você também pode usar o NVM — Node Version Manager — um script de bash em conformidade com a POSIX, para instalar e gerenciar diversas versões do Node.js em sua máquina.

Se estiver pronto, vamos aprender por meio de exemplos a criar uma aplicação do Angular 8 que consome uma API REST usando o HttpClient. Implementaremos recursos do mundo real, como tratamento de erros e novas tentativas quando solicitações de HTTP não dão certo.

Passo 1 — Instalação da CLI do Angular 8

Comecemos com o primeiro passo: onde instalaremos a versão mais recente da CLI do Angular.

A CLI do Angular é a ferramenta oficial para inicializar e começar a trabalhar com os projetos do Angular. Inicie um terminal (no Mac ou no Linux) e execute o seguinte comando:

$ npm install -g @angular/cli

Ao escrever este tutorial, a angular/cli v8.3.2 é a que foi instalada em nosso sistema.

Pronto! Você já pode passar para o próximo passo!

Passo 2 — Criação de seu projeto do Angular 8

Neste passo, usaremos a CLI do Angular para inicializar nosso projeto do Angular.

Use o terminal para executar os seguintes comandos:

$ cd ~
$ ng new angular-example

A CLI perguntará a você se você quer adicionar o roteamento para o Angular. Confirme que sim. Em seguida, ela perguntará qual formato de folha de estilo você vai querer usar. Selecione CSS.

A CLI do Angular vai gerar os arquivos e pastas necessários, instalará os pacotes a partir do npm e configurará automaticamente o roteamento em nosso projeto.

Vá para a pasta raiz do projeto e execute o servidor de desenvolvimento local usando estes comandos:

$ cd angular-example
$ ng serve

Sua aplicação da web do Angular estará disponível a partir do endereço http://localhost:4200/.

Abra um navegador da web e acesse o endereço http://localhost:4200/. Você deverá ver uma linda página (Iniciando com o Angular 8.3+):

Você precisará sair do servidor de desenvolvimento em execução e abrir um novo terminal para os próximos passos.

Você está pronto para o terceiro passo!

Passo 3 — Inclusão do HttpClient do Angular

Neste passo, adicionaremos o HttpClient ao nosso projeto de exemplo.

Abra o arquivo src/app/app.module.ts e faça as seguintes alterações:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Simplesmente, importamos o HttpClientModule e o incluímos no array de imports.

É isso – agora, podemos usar o serviço do HttpClient em nosso projeto do Angular para consumir nossa API REST.

Você está pronto para o quarto passo!

Passo 4 — Criação dos componentes da UI

As aplicações do Angular são feitas de componentes. Neste passo, aprenderemos a criar alguns componentes do Angular que fazem composição com nossa UI.

Abra um novo terminal e execute o seguinte comando:

$ cd ~/angular-example  
$ ng g component home

Você obterá o seguinte resultado no terminal:

CREATE src/app/home/home.component.html (19 bytes)  
CREATE src/app/home/home.component.spec.ts (614 bytes)  
CREATE src/app/home/home.component.ts (261 bytes)  
CREATE src/app/home/home.component.css (0 bytes)  
UPDATE src/app/app.module.ts (467 bytes)

Temos quatro arquivos, todos solicitados pelo nosso componente.

Em seguida, geraremos o componente About:

$ ng g component about

Depois, abrimos o arquivo src/app/about/about.component.html e adicionamos o seguinte código:

<p style="padding: 15px;"> Esta é a página de "about", que descreve sua aplicação</p>

Você está pronto para o próximo passo!

Passo 5 — Inclusão do roteamento

Neste passo, aprenderemos a adicionar o roteamento em nosso exemplo.

Vá para o arquivo src/app/app-routing.module.ts e adicione as seguintes rotas:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';


const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full'},
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Importamos os componentes do Angular e declaramos três rotas.

A primeira rota é para o redirecionamento do caminho vazio para o componente home (a página inicial). Assim, seremos automaticamente redirecionados para a página inicial quando visitamos a aplicação pela primeira vez.

É isso. Agora que adicionamos o roteamento, podemos passar para o próximo passo!

Passo 6 — Inclusão do Angular Material

Neste passo do tutorial, aprenderemos a configurar o Angular Material em nosso projeto e a criar a UI da nossa aplicação usando seus componentes.

Vá para o terminal e execute este comando a partir da raiz do projeto:

$ ng add @angular/material

Será solicitado que você escolha o tema. Vamos escolher Indigo/Pink.

Para as outras perguntas – se você deseja configurar o HammerJS para o reconhecimento de gestos e se você quer configurar as animações do navegador para o Angular Material - pressione Enter para usar as respostas padrão.

Abra o arquivo src/app/app.module.ts e adicione as seguintes importações:

import { MatToolbarModule,
  MatIconModule,
  MatCardModule,
  MatButtonModule,
  MatProgressSpinnerModule } from '@angular/material';

Importamos os módulos destes componentes do Material Design:

• MatToolbar, que fornece um contêiner para cabeçalhos, títulos ou ações
• MatCard, que fornece um contêiner de conteúdo para textos, fotos e ações no contexto de um único sujeito.
• MatButton, que fornece um elemento <button> ou <a> nativo, melhorado com o estilo e efeitos de tinta do Material Design.
• MatProgressSpinner, que fornece um indicador circular de andamento e atividade.

Em seguida, adicionamos esses módulos ao array de imports:

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    AboutComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    BrowserAnimationsModule,
    MatToolbarModule,
    MatIconModule,
    MatButtonModule,
    MatCardModule,
    MatProgressSpinnerModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Depois, abra o arquivo src/app/app.component.html e atualize-o assim:

<mat-toolbar color="primary">  
<h1>  
My Angular Store  
</h1>  
<button mat-button routerLink="/">Home</button>  
<button mat-button routerLink="/about">About</button></mat-toolbar><router-outlet></router-outlet>

Adicionamos a barra de navegação na parte superior, com dois botões que nos levam para a página inicial e para a página do about, respectivamente.

Passo 7 — Criação do mock da API REST

Acesse uma nova interface de linha de comando (a CLI) e comece instalando json-server a partir do npm em seu projeto:

$ cd ~/angular-example
$ npm install --save json-server 

Em seguida, crie uma pasta server na pasta raiz do seu projeto do Angular:

$ mkdir server
$ cd server

Na pasta server, crie um arquivo database.json e adicione o seguinte objeto de JSON:

{
    "products": []
}

Esse arquivo JSON funcionará como um banco de dados para seu servidor da API REST. Você precisa apenas adicionar alguns dados a serem servidos pela sua API REST ou usar o Faker.js para gerar automaticamente grandes quantidades de dados falsos, porém realistas.

Volte para sua linha de comando, retorne à pasta server e instale o Faker.js a partir do npm usando o seguinte comando:

$ cd ..
$ npm install faker --save

No momento da criação desse exemplo*, será instalada a versão 4.1.0 do faker.

Nota de tradução: no momento da tradução deste texto, o faker está em sua versão 6.6.6.

Agora, crie um arquivo generate.js e adicione o código abaixo:

var faker = require('faker');

var database = { products: []};

for (var i = 1; i<= 300; i++) {
  database.products.push({
    id: i,
    name: faker.commerce.productName(),
    description: faker.lorem.sentences(),
    price: faker.commerce.price(),
    imageUrl: "https://source.unsplash.com/1600x900/?product",
    quantity: faker.random.number()
  });
}

console.log(JSON.stringify(database));

Primeiro, importamos o faker. Em seguida, definimos um objeto com um array vazio para os produtos (products). Depois, inserimos um laço for para criar 300 entradas falsas usando os métodos do faker, como faker.commerce.productName(), para gerar os nomes dos produtos. Confira todos os métodos disponíveis. Por fim, convertemos o objeto do banco de dados em uma string e a registramos na saída padrão.

Então, adicionamos os scripts generate e server ao arquivo package.json:

  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "generate": "node ./server/generate.js > ./server/database.json",
    "server": "json-server --watch ./server/database.json"
  },

Retornamos depois disso à interface de linha de comando e executamos o script generate usando o seguinte comando:

$ npm run generate

Por fim, executamos o servidor da API REST usando este comando:

$ npm run server

Agora, você pode enviar solicitações de HTTP ao servidor como faz com qualquer servidor de API REST típico. Ele estará disponível no endereço http://localhost:3000/.

Estes são os endpoints da API que poderemos usar com o nosso servidor de API REST em JSON:

• GET /products para obter os produtos
• GET /products/<id> para obter um único produto por id
• POST /products para criar um produto
• PUT /products/<id> para atualizar um produto por id
• PATCH /products/<id> para atualizar parcialmente um produto por id
• DELETE /products/<id> para excluir um produto por id

Você pode usar os parâmetros _page e _limit para obter os dados de modo paginado. No cabeçalho Link, você terá os links first, prev, next e last.

Deixe o servidor de API REST em JSON em execução e abra uma nova interface de linha de comando para digitar os comandos para os próximos passos.

Passo 8 — Criação de um serviço para o consumo da API REST com o HttpClient do Angular

Neste passo, aprenderemos a consumir nossa API REST a partir do Angular usando HttpClient.

Precisamos criar um serviço do Angular para o encapsulamento do código que nos permitirá consumir os dados de nosso servidor API REST.

Vá para o terminal e execute o seguinte comando:

$ ng g service api

Depois, vá para o arquivo src/app/api.service.ts, importe e injete o HttpClient:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class ApiService {

  private SERVER_URL = "http://localhost:3000";

  constructor(private httpClient: HttpClient) { }
}

Importamos e injetamos o serviço HttpClient e definimos a variável SERVER_URL, que contém o endereço de nosso servidor de API REST.

Depois, definimos um método get(), que envia uma solicitação GET para o endpoint da API REST:

import { Injectable } from '@angular/core';  
import { HttpClient } from '@angular/common/http';

@Injectable({  
	providedIn: 'root'  
})  
export class ApiService {

	private SERVER_URL = "http://localhost:3000";
	constructor(private httpClient: HttpClient) { }

	public get(){  
		return this.httpClient.get(this.SERVER_URL);  
	}  
}

O método simplesmente invoca o método get() do HttpClient para enviar solicitações GET ao servidor de API REST.

Depois disso, precisamos usar o serviço em nosso componente home (a página inicial). Abra o arquivo src/app/home/home.component.ts, importe e injete o serviço de dados, assim:

import { Component, OnInit } from '@angular/core';  
import { ApiService } from '../api.service';

@Component({  
	selector: 'app-home',  
	templateUrl: './home.component.html',  
	styleUrls: ['./home.component.css']  
})  
export class HomeComponent implements OnInit {
	products = [];
	constructor(private apiService: ApiService) { }
	ngOnInit() {
		this.apiService.get().subscribe((data: any[])=>{  
			console.log(data);  
			this.products = data;  
		})  
	}
}

Importamos e injetamos ApiService. Agora, definimos uma variável products e chamamos o método get() do serviço para buscar os dados do servidor da API REST em JSON.

A seguir, abrimos o arquivo src/app/home/home.component.html e o atualizamos do seguinte modo:

<div style="padding: 13px;">
    <mat-spinner *ngIf="products.length === 0"></mat-spinner>

    <mat-card *ngFor="let product of products" style="margin-top:10px;">
        <mat-card-header>
            <mat-card-title>{{product.name}}</mat-card-title>
            <mat-card-subtitle>{{product.price}} $/ {{product.quantity}}
            </mat-card-subtitle>
        </mat-card-header>
        <mat-card-content>
            <p>
                {{product.description}}
            </p>
            <img style="height:100%; width: 100%;" src="{{ product.imageUrl }}" />
        </mat-card-content>
        <mat-card-actions>
      <button mat-button> Buy product</button>
    </mat-card-actions>
    </mat-card>
</div>

Usamos o componente <mat-spinner> para exibir um spinner de carregamento quando o tamanho do array products for igual a zero, ou seja, antes de qualquer dado ter sido recebido do servidor da API REST.

Depois, percorremos o array products e usamos o card do Material para exibir name, price, quantity, description e image de cada produto.

Esta é uma imagem da página inicial após a busca dos dados em JSON:

Em seguida, veremos como adicionar o tratamento de erros ao nosso serviço.

Passo 9 — Inclusão de tratamento de erros

Neste passo, aprenderemos a adicionar o tratamento de erros em nosso exemplo.

Vá para o arquivo src/app/api.service.ts e atualize-o assim:

import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse } from "@angular/common/http";

import {  throwError } from 'rxjs';
import { retry, catchError } from 'rxjs/operators';


@Injectable({
  providedIn: 'root'
})
export class ApiService {

  private SERVER_URL = "http://localhost:3000/products";

  constructor(private httpClient: HttpClient) { }

  handleError(error: HttpErrorResponse) {
    let errorMessage = 'Unknown error!';
    if (error.error instanceof ErrorEvent) {
      // Client-side errors
      errorMessage = `Error: ${error.error.message}`;
    } else {
      // Server-side errors
      errorMessage = `Error Code: ${error.status}\nMessage: ${error.message}`;
    }
    window.alert(errorMessage);
    return throwError(errorMessage);
  }

  public sendGetRequest(){
    return this.httpClient.get(this.SERVER_URL).pipe(catchError(this.handleError));
  }
}

Esta é uma imagem com um exemplo de erro no console do navegador:

No próximo passo, veremos como adicionar a paginação em nossa aplicação

Passo 10 — Inclusão da paginação

Neste passo, aprenderemos a adicionar o suporte à paginação de dados usando o cabeçalho Link da resposta do HTTP recebida do servidor da API REST.

Por padrão, o HttpClient fornece apenas o corpo da resposta. Porém, em nossa aplicação, necessitamos fazer o parsing do cabeçalho Link para a extração dos links de paginação. Desse modo, precisamos instruir o HttpClient a nos dar a resposta de HttpResponse completa usando a opção observe.

O cabeçalho Link no HTTP permite que o servidor oriente um client interessado para outros recursos que contenham metadados sobre o recurso solicitado. Veja mais sobre o cabeçalho na página da W3C (em inglês).

Abra o arquivo src/app/data.service.ts e importe o operador tap() do RxJS:

import { retry, catchError, tap } from 'rxjs/operators';

Depois, adicionamos estas variáveis:

public first: string = "";  
public prev: string = "";  
public next: string = "";  
public last: string = "";

Em seguida, adicionamos o método parseLinkHeader(), que será usado para fazer o parsing do cabeçalho Link e para preencher as variáveis anteriores:

  parseLinkHeader(header) {
    if (header.length == 0) {
      return ;
    }

    let parts = header.split(',');
    var links = {};
    parts.forEach( p => {
      let section = p.split(';');
      var url = section[0].replace(/<(.*)>/, '$1').trim();
      var name = section[1].replace(/rel="(.*)"/, '$1').trim();
      links[name] = url;

    });

    this.first  = links["first"];
    this.last   = links["last"];
    this.prev   = links["prev"];
    this.next   = links["next"]; 
  }

Então, atualizamos sendGetRequest() da seguinte maneira:

  public sendGetRequest(){
    // Adicione parâmetros _page e _limit seguros, codificados como URL 

    return this.httpClient.get(this.SERVER_URL, {  params: new HttpParams({fromString: "_page=1&_limit=20"}), observe: "response"}).pipe(retry(3), catchError(this.handleError), tap(res => {
      console.log(res.headers.get('Link'));
      this.parseLinkHeader(res.headers.get('Link'));
    }));
  }

Adicionamos a opção observe com o valor response no parâmetro options do método get() para termos a resposta completa do HTTP com os cabeçalhos. A seguir, usamos o operador tap() do RxJS para fazer o parsing do cabeçalho Link antes de retornar o Observable final.

Como sendGetRequest() agora retorna um Observable com uma resposta completa de HTTP, precisamos atualizar o componente home. Portanto, abra o arquivo src/app/home/home.component.ts e importe HttpResponse assim:

import { HttpResponse } from '@angular/common/http';

Depois, atualize o método subscribe() da seguinte maneira:

ngOnInit(){

this.apiService.sendGetRequest().pipe(takeUntil(this.destroy$)).subscribe((res: HttpResponse<any>)=>{  
	console.log(res);  
	this.products = res.body;  
})  
}

Podemos agora acessar os dados do objeto body da resposta recebida de HTTP.

Em seguida, retornamos ao arquivo src/app/data.service.ts e adicionamos o seguinte método:

public sendGetRequestToUrl(url: string){  
	return this.httpClient.get(url, { observe: "response"}).pipe(retry(3), 			
	catchError(this.handleError), tap(res => {  
		console.log(res.headers.get('Link'));  
		this.parseLinkHeader(res.headers.get('Link'));
	}));  
}

Esse método é semelhante ao método sendGetRequest(), com a exceção de que recebe o URL para o qual precisamos enviar uma solicitação GET de HTTP.

Retorne ao arquivo src/app/home/home.component.ts e adicione os métodos a seguir:

 public firstPage() {
    this.products = [];
    this.apiService.sendGetRequestToUrl(this.apiService.first).pipe(takeUntil(this.destroy$)).subscribe((res: HttpResponse<any>) => {
      console.log(res);
      this.products = res.body;
    })
  }
  public previousPage() {

    if (this.apiService.prev !== undefined && this.apiService.prev !== '') {
      this.products = [];
      this.apiService.sendGetRequestToUrl(this.apiService.prev).pipe(takeUntil(this.destroy$)).subscribe((res: HttpResponse<any>) => {
        console.log(res);
        this.products = res.body;
      })
    }

  }
  public nextPage() {
    if (this.apiService.next !== undefined && this.apiService.next !== '') {
      this.products = [];
      this.apiService.sendGetRequestToUrl(this.apiService.next).pipe(takeUntil(this.destroy$)).subscribe((res: HttpResponse<any>) => {
        console.log(res);
        this.products = res.body;
      })
    }
  }
  public lastPage() {
    this.products = [];
    this.apiService.sendGetRequestToUrl(this.apiService.last).pipe(takeUntil(this.destroy$)).subscribe((res: HttpResponse<any>) => {
      console.log(res);
      this.products = res.body;
    })
  }

Por fim, abra o arquivo src/app/home/home.component.html e atualize o template da seguinte maneira:

<div style="padding: 13px;">
    <mat-spinner *ngIf="products.length === 0"></mat-spinner>

    <mat-card *ngFor="let product of products" style="margin-top:10px;">
        <mat-card-header>
            <mat-card-title>#{{product.id}} {{product.name}}</mat-card-title>
            <mat-card-subtitle>{{product.price}} $/ {{product.quantity}}
            </mat-card-subtitle>
        </mat-card-header>
        <mat-card-content>
            <p>
                {{product.description}}
            </p>
            <img style="height:100%; width: 100%;" src="{{ product.imageUrl }}" />
        </mat-card-content>
        <mat-card-actions>
      <button mat-button> Buy product</button>
    </mat-card-actions>
    </mat-card>

</div>
<div>
    <button (click) ="firstPage()" mat-button> First</button>
    <button (click) ="previousPage()" mat-button> Previous</button>
    <button (click) ="nextPage()" mat-button> Next</button>
    <button (click) ="lastPage()" mat-button> Last</button>
</div>

Está é uma imagem da nossa aplicação:

Passo 11 — Criação e deploy da aplicação do Angular com o Firebase

Retorne à interface de linha de comando. Certifique-se de estar na pasta raiz do seu projeto do Angular e execute o seguinte comando:

$ ng add @angular/fire

Isso adicionará a capacidade de deploy no Firebase ao seu projeto.

No momento de criação deste tutorial, será instalada a versão 5.2.1 do @angular/fire.

Nota de tradução: no momento da tradução deste texto, o @angular/fire está em sua versão 7.4.0.

O comando também atualizará o package.json do nosso projeto, adicionando a seguinte seção:

        "deploy": {
          "builder": "@angular/fire:deploy",
          "options": {}
        }

A CLI solicitará que você cole o código de autorização, abrirá seu navegador padrão e pedirá que você dê à CLI do Firebase permissões para administrar sua conta no Firebase.

Depois de entrar com a conta do Google associada à conta do Firebase, você receberá o código de autorização.

Em seguida, será solicitado a você que selecione um projeto usando as teclas de seta ou digitando para pesquisar. Você precisa ter criado um projeto do Firebase antes disso.

A CLI criará os arquivos firebase.json e .firebaserc, atualizando o arquivo angular.json conforme necessário.

Depois, faça o deploy de sua aplicação no Firebase usando o seguinte comando:

$ ng deploy

O comando produzirá uma build otimizada de sua aplicação (equivalente ao uso do comando ng deploy --prod). Ele, então, fará o upload dos ativos de produção para a hospedagem do Firebase.

Conclusão

Neste tutorial passo a passo, você aprendeu a criar uma aplicação do Angular do zero usando a versão 8.3 do Angular ou superior.

Você também aprendeu a fazer o mock de um back-end de API REST para sua aplicação do Angular sem, praticamente, escrever linha alguma de código.

Vimos também como criar um projeto usando a CLI do Angular, adicionar o HttpClient e o Angular Material para o envio de solicitações de HTTP ao seu mock de back-end de API REST e para a estilização da UI com os componentes do Material Design.

Por fim, aprendemos como fazer o deploy da aplicação do Angular no Firebase usando o comando ng deploy, disponível a partir da versão 8.3 do Angular.

Confira outros tutoriais do Angular (em inglês).

Você pode entrar em contato com o autor usando estes links:

• Site pessoal na web
• Twitter
• LinkedIn
• Github