O objetivo desse repositório é mostrar uma técnica de como adicionar uma aplicação com Angular + PO UI no fluig.

Essa técnica consiste em criar uma widget e adicionar uma aplicação angular dentro dela. Posteriormente podemos criar ou editar uma página e adicionar essa widget nela.

Abaixo estão os passos necessários para realizar essa técnica com todas as configurações necessárias.

NOTA

• Node 10.15.x
• NPM 6.4.x
• Angular CLI: 7.1.3
• Java 7 ou superior
• Maven 3.6.0

Para executar esse projeto de exemplo, devemos executar somente o comando a seguir:

mvn clean install

Após a execução, é necessário realizar o deploy do artefato app_angular_poui.war pela Central de Componentes do fluig. Depois, basta criar ou editar uma página já existente e adicionar a widget Angular APP PO UI.

Abaixo foi disponibilizado uma documentação detalhada de como criar esse projeto.

Podemos criar uma widget de duas formas. Pela documentação oficial ou através do plugin para a IDE Eclipse, fluig Studio.

Documentação de criação de um widget: http://tdn.totvs.com/display/public/fluig/Widgets

Guia de instalação fluig Studio: http://tdn.totvs.com/pages/releaseview.action?pageId=73078179

Caso você ainda não tenha instalado o pacote @angular/cli, instale-o via npm.

npm i -g @angular/[email protected]

Essa próxima etapa é relativamente simples. No terminal, dentro do diretório src/main/ devemos executar o comando:

ng new <NOME_DO_APP> --skip-install

O parâmetro --skip-install permite criar o projeto, contudo, não instalará as dependências automaticamente. Isso porque devemos alterar a versão do Angular antes. Faremos a instalação posteriormente.

Após adicionar o APP Angular, devemos configurar o plugin frontend-maven-plugin para realizar o gerenciamento da versão do Node, instalação e compilação do projeto.

<groupId>com.github.eirslett</groupId>
<artifactId>frontend-maven-plugin</artifactId>

O primeiro execution deve realizar a instalação do node e do npm. Então devemos adicionar, dentro da tag executions devemos adicionar as seguintes instruções:

<execution>
  <id>install node and npm</id>
  <goals>
    <goal>install-node-and-npm</goal>
  </goals>
  <phase>generate-resources</phase>
</execution>

Depois devemos adicionar todos os passos para executar a instalação e compilação do nosso projeto, chamando os scripts npm configurados no package.json.

<!-- Registry NPM para encontrar os pacotes do fluig -->
<execution>
  <id>npm set registry</id>
  <goals>
    <goal>npm</goal>
  </goals>
  <configuration>
    <arguments>set registry http://nexus.fluig.com/repository/npm-group/</arguments>
  </configuration>
</execution>

<!-- Instalação das dependências -->
<execution>
  <id>npm install</id>
  <goals>
    <goal>npm</goal>
  </goals>
  <configuration>
    <arguments>install</arguments>
  </configuration>
</execution>

<!-- Compilação do projeto em modo produção -->
<execution>
  <id>npm run</id>
  <goals>
    <goal>npm</goal>
  </goals>
  <configuration>
    <arguments>run build-prod</arguments>
  </configuration>
</execution>

Veja a configuração final aqui.

Devemos agora configurar o APP Angular para funcionar dentro da widget, para isso, vamos alterar a confiruração dos parâmetros outputPath e deployUrl do arquivo angular.json.

outputPath:

"outputPath": "../webapp/resources",

deployUrl:

"deployUrl": "/app_angular_poui/resources/",

Atenção: O valor app_angular_poui obrigatoriamente precisa ser o code da widget.

Precisamos primeiro adicionar o arquivo app.config.ts no projeto e depois configurar no módulo principal da nossa aplicação.

...
import { APP_CONFIG } from './app.config';
import { APP_BASE_HREF } from '@angular/common';
...
providers: [
  ...
  { provide: APP_BASE_HREF, useValue: APP_CONFIG.APP_BASE || '/' }
],

Isso garante que o APP funcione em qualquer rota ou página do fluig, inclusive em páginas públicas.

Agora precisamos adicionar a tag principal da aplicação na view.ftl da widget. Esse arquivo se comportará como o index.html de uma aplicação Angular padrão.

...
<app-root></app-root>
...

Devemos adicionar também os bundles padrões do Angular.

<!-- CSS -->
<link href="/${coreContext}/resources/styles.css" rel="stylesheet"/>

...
<!-- JS -->
<script src="/${coreContext}/resources/runtime.js" defer></script>
<script src="/${coreContext}/resources/polyfills-es5.js" nomodule defer></script>
<script src="/${coreContext}/resources/polyfills.js" defer></script>
<!-- scripts.js será usado somente se for adicionado algum script no angular.json do APP -->
<script src="/${coreContext}/resources/scripts.js" defer></script>
<script src="/${coreContext}/resources/main.js" defer></script>

Precisamos também configurar alguns parâmentros do fluig para que sejam enviados para o APP angular.

<#assign coreContext='app_angular_poui'>
<script>
/**
 * The script below sets some enviroment variables to be used inside
 * Angular application. (see: app.config.ts)
 */
(function setEnvironmentParams() {
  var protectedContextPath = '${protectedContextPath!""}';
  var contextPath = '${contextPath!""}';
  // base url for frontend application
  var baseUrl = protectedContextPath + '/${tenantCode!""}';
  // replace '/p' for public pages
  if (window.location.href.indexOf(protectedContextPath) === -1) {
    baseUrl = baseUrl.replace(protectedContextPath, contextPath);
  }
  // base url for frontend application
  window['_app_baseUrl'] = baseUrl;
  // get page code
  window['_app_pageCode'] = '${(pageCode!"")}';
})();
</script>

Esses parâmetros serão obtidos pelo arquivo app.config.ts. Veja a configuração final aqui.

Agora podemos adicionar o PO UI em nosso APP. Para mais detalhes, acesse a documentação oficial de instalação do PO UI.

Antes de executar a instalação, é necessário que todas as dependências do projeto estejam declaradas de acordo com a versão do PO UI e Angular no arquivo package.json, localizado na raiz da aplicação.

...
"dependencies": {
  "@angular/animations": "~9.1.0",
  "@angular/common": "~9.1.0",
  "@angular/compiler": "~9.1.0",
  "@angular/core": "~9.1.0",
  "@angular/forms": "~9.1.0",
  "@angular/platform-browser": "~9.1.0",
  "@angular/platform-browser-dynamic": "~9.1.0",
  "@angular/router": "~9.1.0",
  "rxjs": "~6.5.4",
  "tslib": "^1.11.1",
  "zone.js": "~0.10.3"
  ...
},
"devDependencies": {
  "@angular-devkit/build-angular": "~0.901.0",
  "@angular/cli": "~9.1.0",
  "@angular/compiler-cli": "~9.1.0",
  "@angular/language-service": "~9.1.0",
  "typescript": "~3.8.3",
  ...
}
...

Após configurar seu arquivo, certifique-se de salvar as alterações realizadas e também que seu terminal esteja apontando para o caminho raiz da aplicação, então execute o comando:

npm install

Após a execução deverá conter a pasta node_modules em seu projeto com as dependências necessárias.

Utilizando o comando ng add do Angular CLI, vamos adicionar o Po em seu projeto e o mesmo se encarregará de configurar o tema, instalar o pacote e importar o módulo do Po. Para isso, execute o seguinte comando:

ng add @po-ui/ng-components

Ao executar o comando acima, será perguntado se deseja incluir uma estrutura inicial em seu projeto com menu lateral, página e toolbar, utilizando componentes do Po, caso desejar, apenas informe: Y.

No módulo principal da aplicação é preciso fazer a importação do módulo PoModule e incluí-lo nos imports do mesmo. Veja abaixo como fazer:

...
import { PoModule } from '@po-ui/ng-components';

@NgModule({
  ...
  imports: [
    ...
    PoModule
  ],
  ...
})
...

"styles": [
  "./node_modules/@po-ui/style/css/po-theme-default.min.css",
  "styles.css"
],

Pronto, agora temos uma aplicação Angular com PO UI configurada. Podemos agora executar o comando mvn clean install na raiz do nosso projeto e depois realizar o deploy dele no fluig.