O objetivo desse repositório é mostrar uma técnica de como adicionar uma aplicação com Angular + THF no fluig.
Essa técnica consiste em criar um layout e adicionar uma aplicação angular dentro dele. Posteriormente podemos criar ou editar uma página e adicionar ele layout nela.
Abaixo estão os passos necessários para realizar essa técnica com todas as configurações necessárias.
- 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 installApós a execução, é necessário realizar o deploy do artefato app_angular_thf.war pela Central de Componentes do fluig. Depois, basta criar ou editar uma página já existente e trocar o layout pelo Universo TOTVS APP THF.
Abaixo foi disponibilizado uma documentação detalhada de como criar esse projeto.
Commit: Adicionando layout base para a aplicação.
Podemos criar um layout através 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 layout: http://tdn.totvs.com/display/public/fluig/Layouts
Guia de instalação fluig Studio: http://tdn.totvs.com/pages/releaseview.action?pageId=73078179
Commit: Adicionando APP angular no layout.
Essa etapa é relativamente simples. No terminal, dentro do diretório src/main/ devemos executar o comando:
ng new <NOME_DO_APP> --skip-installO 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.
Commit: Configurando o plugin maven para realizar a instalação e compilação do projeto.
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.
Commit: Configurando outputPath e deployUrl para funcionamento no layout.
Devemos agora configurar o APP Angular para funcionar dentro do layout, 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_thf/resources/",Atenção: O valor app_angular_thf obrigatoriamente precisa ser o code do layout.
Commit: Configurando APP para funcionar em paths dinâmicos.
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.
Commit: Adicionando tag principal e bundles do app no view.ftl do layout.
Agora precisamos adicionar a tag principal da aplicação na view.ftl do layout. 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 type="text/javascript" src="/${coreContext}/resources/runtime.js"></script>
<script type="text/javascript" src="/${coreContext}/resources/polyfills.js"></script>
<!-- scripts.js será usado somente se for adicionado algum script no angular.json do APP -->
<script type="text/javascript" src="/${coreContext}/resources/scripts.js"></script>
<script type="text/javascript" src="/${coreContext}/resources/main.js"></script>Precisamos também configurar alguns parâmentros do fluig para que sejam enviados para o APP angular.
<#assign coreContext='app_angular_thf'>
<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.
Commit: Adicionando THF na aplicação.
Agora podemos adicionar o THF em nosso APP. Para mais detalhes, acesse a documentação oficial de instalação do THF.
Antes de executar a instalação, é necessário que todas as dependências do projeto estejam declaradas de acordo com a versão do THF e Angular no arquivo package.json, localizado na raiz da aplicação.
...
"dependencies": {
"@angular/animations": "~8.0.0",
"@angular/common": "~8.0.0",
"@angular/compiler": "~8.0.0",
"@angular/core": "~8.0.0",
"@angular/forms": "~8.0.0",
"@angular/platform-browser": "~8.0.0",
"@angular/platform-browser-dynamic": "~8.0.0",
"@angular/platform-server": "~8.0.0",
"@angular/router": "~8.0.0",
"rxjs": "6.3.3",
...
},
"devDependencies": {
"@angular-devkit/build-angular": "0.11.3",
"@angular/cli": "~8.0.1",
"@angular/compiler-cli": "~8.0.0",
"@angular/language-service": "~8.0.0",
"typescript": "3.1.6",
...
}
...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 installApós a execução deverá conter a pasta node_modules em seu projeto com as dependências necessárias.
Em seguida instale o THF, para isso, execute o seguinte comando:
npm install @totvs/thf-ui --saveCom este comando os pacotes @totvs/thf-ui e @totvs/thf-theme serão instalados e estarão disponíveis para serem usados no projeto.
No módulo principal da aplicação é preciso fazer a importação do módulo ThfModule e incluí-lo nos imports do mesmo. Veja abaixo como fazer:
...
import { ThfModule } from '@totvs/thf-ui';
@NgModule({
...
imports: [
...
ThfModule
],
...
})
..."styles": [
"node_modules/@totvs/thf-theme/css/thf-theme-default.min.css",
"styles.css"
],Pronto, agora temos uma aplicação Angular com THF configurada. Podemos agora executar o comando mvn clean install na raiz do nosso projeto e depois realizar o deploy dele no fluig.
Em desenvolvimento...
Em desenvolvimento...
Em desenvolvimento...
Em desenvolvimento...
Em desenvolvimento...