Angular PWA:

From Zero to Hero

William Grasel

@willgmbr

AngularCLI

Ferramenta de

Linha de Comando

  • Cria novas aplicações
  • Cria novas bibliotecas
  • Conceito de workspace
  • Servidor de desenvolvimento
  • Testes de unidade e E2E
  • Build completo de produção
  • Segue o Style Guide oficial

  $ ng new my-workspace

  $ ng generate application my-app

  $ ng generate library my-lib

Começando a Brincadeira:


  $ ng serve

  $ ng test

  $ ng build

Dia a dia de desenvolvimento:

Ta, e dai??

Angular

Schematics

É uma ferramenta para extender a linha de comando!

De novos poderes para as suas aplicações!

Vamos transformar nossa app numa PWA!


  $ ng add @angular/pwa

Apenas um comando:


  $ ng add @angular/material

  $ ng generate @angular/material:dashboard <component-name>

Adicionando Angular Material no seu projeto:

Server Side Rendering


  $ ng add @nguniversal/express-engine
            --clientProject nome-do-projeto

  $ ng add @ng-toolkit/serverless
          --provider firebase
          --firebaseProject [firebase_project_ID]

Publicando sua PWA

E se a sua app pudesse se atualizar sozinha?


  $ ng update

Será q eu preciso atualizar algo?


  $ ng update @angular/cli @angular/core

Atualizando o Angular da v6 para v7

Referências

Obrigado! =)

@willgmbr