build: atualiza para o Angular 17@next

Atualiza projeto para o angular 17@next. fixes DTHFUI-8041
po-ui · Dec 14, 2023 · b788a25 · b788a25
1 parent 196ba3e
commit b788a25
Show file tree

Hide file tree

Showing 54 changed files with 406 additions and 278 deletions.
diff --git a/.husky/commit-msg b/.husky/commit-msg
@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx --no -- commitlint --edit "$1"
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -0,0 +1,5 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+# npm test
+npx lint-staged
diff --git a/.huskyrc b/.huskyrc
diff --git a/.lintstagedrc b/.lintstagedrc
@@ -0,0 +1,5 @@
+{
+    "*.{ts,js,json,css,scss,html}": [
+        "prettier --write"
+    ]
+}
diff --git a/README.md b/README.md
@@ -20,7 +20,7 @@ Biblioteca de componentes de UI para Angular.
 
 ### Pré-requisitos
 
-Para começar a utilizar o **PO UI** é pré-requisito ter o `Node.js` instalado (versão 16.14.x ou acima) e o seu gerenciador de pacote favorito na versão mais atual. Caso você ainda não tenha instalado o pacote `@angular/cli`, instale-o via `npm` ou `yarn`.
+Para começar a utilizar o **PO UI** é pré-requisito ter o `Node.js` instalado (versão 18.13.x ou acima) e o seu gerenciador de pacote favorito na versão mais atual. Caso você ainda não tenha instalado o pacote `@angular/cli`, instale-o via `npm` ou `yarn`.
 
 Instalando com npm:
 ```
@@ -53,25 +53,25 @@ Veja abaixo a lista de dependências e as versões compatíveis, elas devem ser
 
 ```
  "dependencies": {
-    "@angular/animations": "~16.2.0",
-    "@angular/common": "~16.2.0",
-    "@angular/compiler": "~16.2.0",
-    "@angular/core": "~16.2.0",
-    "@angular/forms": "~16.2.0",
-    "@angular/platform-browser": "~16.2.0",
-    "@angular/platform-browser-dynamic": "~16.2.0",
-    "@angular/router": "~16.2.0",
-    "rxjs": "~7.5.5",
-    "tslib": "^2.3.0",
-    "zone.js": "~0.13.1"
+    "@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/router": "~17.0.4",
+    "rxjs": "~7.8.1",
+    "tslib": "^2.6.2",
+    "zone.js": "~0.14.2"
     ...
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~16.2.0",
-    "@angular/cli": "~16.2.0",
-    "@angular/compiler-cli": "~16.2.0",
+    "@angular-devkit/build-angular": "~17.0.3",
+    "@angular/cli": "~17.0.3",
+    "@angular/compiler-cli": "~17.0.4",
     ...
-    "typescript": "~5.1.6"
+    "typescript": "~5.2.2"
   }
 ```
 

diff --git a/angular.json b/angular.json
@@ -116,13 +116,13 @@
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "app:build:es5",
             "open": true,
-            "host": "0.0.0.0"
+            "host": "0.0.0.0",
+            "buildTarget": "app:build:es5"
           },
           "configurations": {
             "production": {
-              "browserTarget": "app:build:production"
+              "buildTarget": "app:build:production"
             }
           }
         },
@@ -356,18 +356,18 @@
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "portal:build"
+            "buildTarget": "portal:build"
           },
           "configurations": {
             "production": {
-              "browserTarget": "portal:build:production"
+              "buildTarget": "portal:build:production"
             }
           }
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "portal:build"
+            "buildTarget": "portal:build"
           }
         },
         "lint": {

diff --git a/docs/guides/development-flow.md b/docs/guides/development-flow.md
@@ -82,7 +82,7 @@ Este guia tem por objetivo definir as regras para criação de *Issues* relacion
           <blockquote>Para seguir o guia é fundamental o conhecimento da <a href="https://git-scm.com/book/en/v2">ferramenta Git.</a>
           </blockquote>
         <ul>
-          <li>Para utilizar o PO UI, é pré-requisito ter o <code>Node.js</code> instalado (versão 16.14.0 ou acima) e o seu gerenciador de pacote favorito na versão mais atual.</li>
+          <li>Para utilizar o PO UI, é pré-requisito ter o <code>Node.js</code> instalado (versão 18.13.0 ou acima) e o seu gerenciador de pacote favorito na versão mais atual.</li>
           <li>
             <p>É importante que tenha a versão equivalente do Angular instalada. Instale-o via <code>npm</code> ou <code>yarn</code>:</p>
             <p>Instalando com npm:</p>

diff --git a/docs/guides/getting-started.md b/docs/guides/getting-started.md
@@ -3,16 +3,16 @@
 
 ### Pré-requisitos
 
-Para começar a utilizar o **PO UI** é pré-requisito ter o `Node.js` instalado (versão 16.14.x ou acima) e o seu gerenciador de pacote favorito na versão mais atual. Caso você ainda não tenha instalado o pacote `@angular/cli`, instale-o via `npm` ou `yarn`.
+Para começar a utilizar o **PO UI** é pré-requisito ter o `Node.js` instalado (versão 18.13.x ou acima) e o seu gerenciador de pacote favorito na versão mais atual. Caso você ainda não tenha instalado o pacote `@angular/cli`, instale-o via `npm` ou `yarn`.
 
 Instalando com npm:
 ```
-npm i -g @angular/cli@16
+npm i -g @angular/cli@17
 ```
 
 Caso prefira instalar com o yarn:
 ```
-yarn global add @angular/cli@16
+yarn global add @angular/cli@17
 ```
 
 ### Passo 1 - Crie o seu primeiro projeto
@@ -36,25 +36,25 @@ Veja abaixo a lista de dependências e as versões compatíveis, elas devem ser
 
 ```
   "dependencies": {
-    "@angular/animations": "~16.2.0",
-    "@angular/common": "~16.2.0",
-    "@angular/compiler": "~16.2.0",
-    "@angular/core": "~16.2.0",
-    "@angular/forms": "~16.2.0",
-    "@angular/platform-browser": "~16.2.0",
-    "@angular/platform-browser-dynamic": "~16.2.0",
-    "@angular/router": "~16.2.0",
-    "rxjs": "~7.5.5",
-    "tslib": "^2.3.0",
-    "zone.js": "~0.13.1"
+    "@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/router": "~17.0.4",
+    "rxjs": "~7.8.1",
+    "tslib": "^2.6.2",
+    "zone.js": "~0.14.2"
     ...
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~16.2.0",
-    "@angular/cli": "~16.2.0",
-    "@angular/compiler-cli": "~16.2.0",
+    "@angular-devkit/build-angular": "~17.0.3",
+    "@angular/cli": "~17.0.3",
+    "@angular/compiler-cli": "~17.0.4",
     ...
-    "typescript": "~5.1.6"
+    "typescript": "~5.2.2"
   }
 ```
 
@@ -77,7 +77,7 @@ Utilizando o comando `ng add` do [Angular CLI](https://cli.angular.io/), vamos a
 Execute o comando abaixo na pasta raiz do seu projeto:
 
 ```
-ng add @po-ui/ng-components
+ng add @po-ui/ng-components@next
 ```
 
 > 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`**.
@@ -105,7 +105,7 @@ Agora é só abrir seu **editor / IDE** favorito e começar a trabalhar no seu p
 Caso você queira utilizar nossos componentes de templates, como o **[po-page-login](/documentation/po-page-login)**, **[po-modal-password-recovery](/documentation/po-modal-password-recovery)**, **[po-page-blocked-user](/documentation/po-page-blocked-user)**, **[po-page-dynamic-table](/documentation/po-page-dynamic-table)** entre outros, basta adicionar o pacote `@po-ui/ng-templates` executando o comando abaixo:
 
 ```
-ng add @po-ui/ng-templates
+ng add @po-ui/ng-templates@next
 ```
 > Ao executar este comando, será instalado o pacote `@po-ui/ng-templates` e configurado o `PoTemplatesModules` no `app.module`
 

diff --git a/docs/guides/migration-poui.md b/docs/guides/migration-poui.md
@@ -22,7 +22,7 @@ ng update @angular/cli@<version> @angular/core@<version> --force
 Por exemplo:
 
 ```
-ng update @angular/cli@16 @angular/core@16 --force
+ng update @angular/cli@17 @angular/core@17 --force
 ```
 
 > Para realizar a migração completa e avaliar se não precisa fazer alguma alteração veja o [**Guia de Upgrade do Angular**](https://update.angular.io/).
@@ -52,7 +52,7 @@ ng update @po-ui/ng-components@<version> --allow-dirty --force
 Por exemplo:
 
 ```
-ng update @po-ui/ng-components --allow-dirty --force
+ng update @po-ui/ng-components@next --allow-dirty --force
 ```
 
 > Caso ocorra um erro ao concluir o comando acima pode ser necessário fazer uma instalação limpa no projeto apagando a pasta `node_modules` e o arquivo `package-lock.json` e executando o comando `npm i --legacy-peer-deps` antes de realizar o `ng update`.
@@ -84,7 +84,7 @@ ng update @po-ui/ng-sync@<version> --allow-dirty --force
 Por exemplo:
 
 ```
-ng update @po-ui/ng-sync --allow-dirty --force
+ng update @po-ui/ng-sync@next --allow-dirty --force
 ```
 
 O `ng update` ajudará nas alterações necessárias para seu projeto, que será atualizar as versões dos pacotes:

diff --git a/docs/guides/releases.md b/docs/guides/releases.md
@@ -38,6 +38,11 @@ Consulte abaixo nossos guias de migração de versão para obter mais informaç
         </tr>
       </thead>
       <tbody>
+        <tr class="po-table-row">
+          <td class="po-table-column">17.0.0</td>
+          <td class="po-table-column">17.0.0</td>
+          <td class="po-table-column"><a href="guides/migration-poui">Migração do PO UI</a></td>
+        </tr>
         <tr class="po-table-row">
           <td class="po-table-column">16.0.0</td>
           <td class="po-table-column">16.0.0</td>
@@ -93,7 +98,7 @@ Consulte abaixo nossos guias de migração de versão para obter mais informaç
 ## Versões prévias
 
 Permitimos que você visualize o que está por vir, fornecendo pré-lançamentos `next` ou Release Candidates (`rc`) para cada versão principal:
-- **Next**: a versão que está em desenvolvimento, com testes ativos e com breaking changes a resolver. O próximo lançamento é indicado por uma tag de lançamento anexada ao identificador `-next`, como `16.0.0-next`.
-- **Release Candidate**: um lançamento com recurso concluído, teste finalizado e sem breaking changes a resolver. Um candidato a lançamento é indicado por uma tag de lançamento anexada ao identificador `-rc`, como versão `16.0.0-rc`.
+- **Next**: a versão que está em desenvolvimento, com testes ativos e com breaking changes a resolver. O próximo lançamento é indicado por uma tag de lançamento anexada ao identificador `-next`, como `17.0.0-next`.
+- **Release Candidate**: um lançamento com recurso concluído, teste finalizado e sem breaking changes a resolver. Um candidato a lançamento é indicado por uma tag de lançamento anexada ao identificador `-rc`, como versão `17.0.0-rc`.
 
 A versão mais recente `next` ou de pré-lançamento `rc` fica disponível no [npm do projeto](https://www.npmjs.com/package/@po-ui/ng-components?activeTab=versions).
diff --git a/docs/guides/schematics.md b/docs/guides/schematics.md
@@ -10,10 +10,10 @@ Um vez que for instalado o pacotes, teremos disponível os *schematics* através
 ### PO UI Components
 
 Caso esteja iniciando uma aplicação com PO, indica-se utilizar o comando abaixo,
-no qual será instalado o pacote `@po-ui/ng-components@16.0.0` e realizadas algumas configurações, que serão descritas em seguida:
+no qual será instalado o pacote `@po-ui/ng-components@next` e realizadas algumas configurações, que serão descritas em seguida:
 
 ```
-ng add @po-ui/ng-components@16.0.0
+ng add @po-ui/ng-components@next
 ```
 
 - Substitui o `AppComponent` com uma estrutura incial de um projeto, utilizando os components `po-page-default`, `po-toolbar`, e `po-menu`;
@@ -26,7 +26,7 @@ Para a utilização de componentes de template o processo para inclusão é seme
 Primeiramente, deve-se utilizar o comando abaixo, no qual será instalado o pacote `@po-ui/ng-templates`:
 
 ```
-ng add @po-ui/ng-templates@16.0.0
+ng add @po-ui/ng-templates@next
 ```
 
 - Importa o módulo do PO;

diff --git a/docs/guides/sync-fundamentals.md b/docs/guides/sync-fundamentals.md
@@ -75,7 +75,7 @@ Esta sincronização pode ser acionada (gatilho) das seguintes formas:
 - [Manualmente](guides/sync-fundamentals#sync): será acionada na chamada manual do método `PoSyncService.sync()`.
 
 > Antes de continuar os próximos passos, siga as instruções do [Começando com o PO Sync](guides/sync-get-started) para
-saber como criar um novo projeto com Ionic 5 utilizando o PO Sync.
+saber como criar um novo projeto com Ionic 7 utilizando o PO Sync.
 
 <a id="knowledge"></a>
 ## Conhecimentos necessários

diff --git a/docs/guides/sync-get-started.md b/docs/guides/sync-get-started.md
@@ -9,13 +9,13 @@ Para maiores detalhes sobre os serviços e métodos utilizados neste tutorial, c
 ### Pré-requisitos
 
 - [Node.js e NPM](https://nodejs.org/en/)
-- [Angular CLI](https://cli.angular.io/) (~16.2.0):
+- [Angular CLI](https://cli.angular.io/) (~17.0.3):
   - ```shell
-    npm install -g @angular/cli@16
+    npm install -g @angular/cli@17
     ```
-- [Ionic](https://ionicframework.com/docs/cli/) (^6.0.0):
+- [Ionic](https://ionicframework.com/docs/cli/) (^7.0.0):
   - ```shell
-    npm install -g @ionic/cli@6
+    npm install -g @ionic/cli@7
     ```
 
 
@@ -49,34 +49,30 @@ Antes de executar a instalação, é necessário que todas as dependências do p
 ```typescript
   ...
   "dependencies": {
-    "@angular/animations": "~16.2.0",
-    "@angular/common": "~16.2.0",
-    "@angular/core": "~16.2.0",
-    "@angular/forms": "~16.2.0",
-    "@angular/platform-browser": "~16.2.0",
-    "@angular/platform-browser-dynamic": "~16.2.0",
-    "@angular/router": "~16.2.0",
-    "@angular/service-worker": "~16.2.0",
-    "@ionic/angular": "^6.0.0",
-    "@capacitor/network": "^4.1.0",
-    "@capacitor/splash-screen": "^4.1.4",
-    "rxjs": "~7.5.5",
-    "tslib": "^2.3.0",
-    "zone.js": "~0.13.1"
+    "@angular/animations": "~17.0.4",
+    "@angular/common": "~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/router": "~17.0.4",
+    "@angular/service-worker": "~17.0.4",
+    "@ionic/angular": "^7.5.7",
+    "@capacitor/network": "^5.0.6",
+    "@capacitor/splash-screen": "^5.0.6",
+    "rxjs": "~7.8.1",
+    "tslib": "^2.6.2",
+    "zone.js": "~0.14.2"
     ...
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~16.2.0",
-    "@angular-eslint/builder": "~15.1.0",
-    "@angular-eslint/eslint-plugin": "~15.1.0",
-    "@angular-eslint/eslint-plugin-template": "~15.1.0",
-    "@angular-eslint/template-parser": "~15.1.0",
-    "@angular/cli": "~16.2.0",
-    "@angular/compiler": "~16.2.0",
-    "@angular/compiler-cli": "~16.2.0",
-    "@angular/language-service": "~16.2.0",
-    "@ionic/angular-toolkit": "^6.0.0",
-    "typescript": "~5.1.6"
+    "@angular-devkit/build-angular": "~17.0.3",
+    "@angular/cli": "~17.0.3",
+    "@angular/compiler": "~17.0.3",
+    "@angular/compiler-cli": "~17.0.3",
+    "@angular/language-service": "~17.0.4",
+    "@ionic/angular-toolkit": "^10.0.0",
+    "typescript": "~5.2.2"
   },
   ...
 ```
@@ -271,7 +267,7 @@ No arquivo `src/app/home/home.page.html` crie a seguinte estrutura:
 
 Execute o comando `ionic serve` e verifique o funcionamento do aplicativo Ionic com `po-sync`.
 
-> Pode ocorrer o seguinte erro `TS2320: Interface 'HTMLIonIconElement' cannot simultaneously extend types 'IonIcon' and 'HTMLStencilElement'` por conta da versão do TypeScript (4.4.x) conforme esta [issue](https://github.com/ionic-team/ionicons/issues/1011), neste caso adicione no arquivo **tsconfig.json** `"skipLibCheck": true`.
+> Pode ocorrer o seguinte erro `TS2320: Interface 'HTMLIonIconElement' cannot simultaneously extend types 'IonIcon' and 'HTMLStencilElement'` por conta da versão do TypeScript (5.2.x) conforme esta [issue](https://github.com/ionic-team/ionicons/issues/1011), neste caso adicione no arquivo **tsconfig.json** `"skipLibCheck": true`.
 
 #### Passo 8.1 - Entendendo o funcionamento do `po-sync`