Histórico da Página

01. Dependências

• @angular
  Bloco de código

  language	bash
  theme	Midnight

  "dependencies": {    "@angular/animations": "~17.0.4", "@angular/common": "~17.0.4", "@angular/compiler": "~17.0.4", "@angular/core": "~17.0.4", "@angular/forms": "~17.0.4", "@angular/platform-browser": "~17.0.4", "@angular/platform-browser-dynamic": "~17.0.4", "@angular/platform-server": "~17.0.4", "@angular/router": "~17.0.4", "@po-ui/ng-components": "17
  • • Angular na versão 17
  • @po-ui
    • ng-components@17.0.0-next.0
  ", "@po-ui/ng-templates": "17
  • • ng-templates@17.0.0-next.0
  ", "@po-ui/style": "17.0.0-next.0", "@totvs/po-theme": "^17
  • subsink
  • totvs/po-theme
    • po-theme@17.0.0-next
  .0", "core-js": "^3.13.0", "rxjs": "~7.8.1", "rxjs-compat": "^6.6.3", "subsink": "^1.0.2", "zone.js": "~0.14.2",
  • • .
  .. }, "devDependencies": { "@angular-devkit/build-angular": "~17.0.3", "@angular/cli": "~17.
  • • 0
  .3", "@angular/compiler-cli": "~17.0.4", ... "typescript": "~5.2.2" }
  • @po-ui
    • ng-components
    • ng-templates
  • subsink

  02. Instalação

  Caso já seja um projeto existente, basta instalar a dependência do protheus-lib-core

  Bloco de código
  language bash theme Midnight
  npm i @totvs/protheus-lib-core

  
  

  Caso o CLI do Angular ainda não esteja instalado, é necessário instalar o mesmo:

  Bloco de código
  language bash theme Midnight
  npm i -g @angular/cli@15

  
  

  Para iniciar um projeto Angular, de forma macro, os comandos são os seguintes

  Bloco de código
  language bash theme Midnight
  ng new my-protheus-app cd my-protheus-app ng add @po-ui/ng-components@15 ng add @po-ui/ng-templates@15 npm i subsink npm i @totvs/protheus-lib-core@15 ng serve

  
  

  03. Utilização

  Para utilizar o protheus-lib-core, basta importar o módulo principal no projeto:

  Bloco de código
  language js theme Midnight
  import { ProtheusLibCoreModule } from '@totvs/protheus-lib-core';

  Também adicionar o módulo no imports:

  Bloco de código
  language js theme Midnight
  imports: [     ProtheusLibCoreModule,   ],

  
  

  04. Exemplo

  Importar um dos serviços do protheus-lib-core, como o ProAppConfigService que permite a comunicação do app com a camada ADVPL, permitindo por exemplo fechar a dialog a qual o app foi aberto:

  Bloco de código
  language js theme Midnight
  import { ProAppConfigService } from '@totvs/protheus-lib-core';

  Criar o constructor para utilizar o serviço importado:

  Bloco de código
  language js theme Midnight
  constructor(private proAppConfigService: ProAppConfigService) { }

  Método para fechar o app no Protheus, podendo ser chamado no menu, em algum botão etc:

  Bloco de código
  language js theme Midnight
  private closeApp() { if (this.proAppConfigService.insideProtheus()) { this.proAppConfigService.callAppClose(); } else { alert('O App não está sendo executado dentro do Protheus.'); } }

  
  

  05. Geração do aplicativo

  Gerar o app com o comando de build do Angular CLI:

  Bloco de código
  language bash theme Midnight
  ng build

  Compactar a pasta do projeto gerada dentro da pasta dist
  A compatação deve ser feita, mantendo o nome da pasta original, sendo uma compactação utilizando ZIP, porém com a extensão app.
  Criar um fonte ADVPL contendo a chamada da função FWCallApp, esse fonte deve ser incluso no menu. O parâmetro da função FWCappApp deve ser o nome do app, nome do arquivo gerado .app, sem extensão.

  Para maiores informações sobre abrir o aplicativo dentro do Protheus: FwCallApp - Abrindo aplicativos Web no Protheus

  
  

  Templatedocumentos