Instalação

Esta documentação está desatualizada e não deve ser seguida para o SDK atualmente.

Pré-Requisitos

Node.js

O Angular e, portanto, o Viasoft SDK requerem a instalação do Node.js versão 10.9.0 ou mais recente. Recomendamos que seja instalada a versão 10.16.3 LTS.

Se já possui o Node.js, abra uma janela do terminal e digite node -v para verificar a versão instalada.
Se você não possui o Node.js ou deseja atualizá-lo, acesse o site do Node.js e siga as instruções de instalação da versão 10.16.3 LTS para seu sistema operacional.

npm

O Angular, suas ferramentas e o Viasoft SDK dependem de funcionalidades providenciadas por bibliotecas disponíveis no npm. Para baixar, instalar e utilizar pacotes do npm, é necessário um gerenciador de pacotes do npm.

Esse guia utilizará o npm client, que é instalado por padrão durante a instalação do Node.js. Para verificar que você possui o npm client instalado, abra uma janela do terminal e digite npm -v.

Angular

Para instalar o Angular CLI, abra uma janela do terminal e digite o seguinte comando:

💲️ npm i -G @angular/cli@7.3.9

É importante que seja utilizada a versão 7.3.9.

Criação do projeto

Para criar um novo projeto, navegue até o diretório onde deseja criar sua aplicação e digite os seguintes comandos:

💲️ ng new <NOME> --prefix=<PREFIXO> --style=scss --routing=false
💲️ cd <NOME>

Não se preocupe com o roteamento, iremos configurá-lo aqui.

Instalação do SDK

Para instalar os pacotes do Viasoft SDK, é necessário adicionar o registry da Viasoft ao seu projeto. Para isso, abra uma janela do terminal e digite o seguinte comando:

💲️ npm config set @viasoft:registry http://proget.korp.com.br/npm/viasoft-sdk-frontend/

Com o registry configurado, digite o seguinte comando para instalar os pacotes @viasoft:

💲️ npm i -S @viasoft/app-core @viasoft/http @viasoft/common @viasoft/components @viasoft/navigation @viasoft/theming @viasoft/view-template

Dependências

Os pacotes do Viasoft SDK requerem que as seguintes dependências sejam instaladas:

@agm/core@1.0.0-beta.7
@angular/cdk@7.3.7
@angular/flex-layout@7.0.0-beta.23
@angular/material@7.3.7
@aspnet/signalr@1.1.4
@asymmetrik/ngx-leaflet@5.0.1
@fortawesome/fontawesome-pro@5.10.2
@ngx-translate/core@11.0.1
angular-oauth2-oidc@8.0.4
angular2-query-builder@0.4.2
dateformat@3.0.3
hammerjs@2.0.8
jwt-decode@2.2.0
leaflet@1.4.0
ng2-date-picker@2.12.0
ngx-currency@1.5.1
ngx-mask@7.3.6
primeicons@1.0.0
primeng@7.0.5

Para isso, abra uma janela do terminal e digite o seguinte comando para cada dependência:

💲️ npm i -S <PACOTE>@<VERSÃO>

Para a instalação do FontAwesome, veja Autenticação do FontAwesome primeiro, depois instale o pacote normalmente.

Configurações adicionais

Autenticação do FontAwesome

Para que os ícones do FontAwesome apareçam, é necessária a autenticação com a chave do FontAwesome Pro. Abra e/ou crie o arquivo .npmrc no diretório raiz do seu projeto e adicione as seguintes linhas:

@fortawesome:registry=https://npm.fontawesome.com/
//npm.fontawesome.com/:_authToken=<INSIRA A CHAVE AQUI>

Para obter a chave de acesso, solicite-a aqui.

Assets

O @viasoft/navigation precisa de dois ícones para que funcione corretamente. Baixe os ícones aqui e coloque-os dentro da pasta src/assets.

Styles

Para o funcionamento correto dos componentes, é necessário que você importe algumas folhas de estilo adicionais.

No angular.json

No diretório raiz do seu projeto, abra o arquivo angular.json e navegue até projects.<NOME DO PROJETO>.architect.build.options.styles:

{
  "projects": {
    "<NOME DO PROJETO>": {
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "styles": [
              "src/styles.scss"
              // aqui!
            ],
          },
        },
      }
    },
  },
}

Então, adicione as seguintes linhas:

"styles": [
    "node_modules/primeicons/primeicons.css",
    "node_modules/primeng/resources/primeng.css",
    "node_modules/primeng/resources/themes/rhea/theme.css",
    "node_modules/@fortawesome/fontawesome-pro/css/all.min.css",
    "node_modules/@fortawesome/fontawesome-pro/css/light.min.css",
    "src/styles.scss"
]

No styles.scss

Em sua aplicação, dentro de src/styles.scss, adicione as seguintes linhas:

@import '~@viasoft/theming/use-theme';
@include useTheme();