build: atualiza para o angular 17

Atualiza o projeto po-sample-app-conference para o angular 17 fixes DTHFUI-8041
po-ui · Dec 7, 2023 · e75466c · e75466c
1 parent 9054403
commit e75466c
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 62 deletions.
diff --git a/po-sample-app-conference/angular.json b/po-sample-app-conference/angular.json
@@ -87,11 +87,11 @@
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "app:build"
+            "buildTarget": "app:build"
           },
           "configurations": {
             "production": {
-              "browserTarget": "app:build:production"
+              "buildTarget": "app:build:production"
             },
             "ci": {
               "progress": false
@@ -101,7 +101,7 @@
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "app:build"
+            "buildTarget": "app:build"
           }
         },
         "test": {
@@ -170,7 +170,8 @@
   "cli": {
     "schematicCollections": [
       "@ionic/angular-toolkit"
-    ]
+    ],
+    "analytics": "24cb69fd-c0ea-4fe1-b901-377eee2c7300"
   },
   "schematics": {
     "@ionic/angular-toolkit:component": {

diff --git a/po-sample-app-conference/package.json b/po-sample-app-conference/package.json
@@ -13,58 +13,59 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^16.2.2",
-    "@angular/common": "^16.2.2",
-    "@angular/core": "^16.2.2",
-    "@angular/forms": "^16.2.2",
-    "@angular/platform-browser": "^16.2.2",
-    "@angular/platform-browser-dynamic": "^16.2.2",
-    "@angular/router": "^16.2.2",
-    "@angular/service-worker": "^16.2.2",
-    "@capacitor/app": "^4.1.1",
-    "@capacitor/core": "^4.6.3",
-    "@capacitor/haptics": "^4.1.0",
-    "@capacitor/keyboard": "^4.1.0",
-    "@capacitor/network": "^4.1.0",
-    "@capacitor/splash-screen": "^4.1.4",
-    "@capacitor/status-bar": "^4.1.1",
-    "@ionic/angular": "^6.1.3",
-    "@ionic/storage": "^2.3.1",
-    "@po-ui/ng-components": "v16.0.0-next.4",
-    "@po-ui/ng-sync": "v16.0.0-next.4",
-    "@po-ui/ng-templates": "v16.0.0-next.4",
-    "core-js": "^2.5.4",
+    "@angular/animations": "~17.0.4",
+    "@angular/cdk": "^17.0.2",
+    "@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",
+    "@capacitor/app": "^5.0.6",
+    "@capacitor/core": "^5.5.1",
+    "@capacitor/haptics": "^5.0.6",
+    "@capacitor/keyboard": "^5.0.6",
+    "@capacitor/network": "^5.0.6",
+    "@capacitor/splash-screen": "^5.0.6",
+    "@capacitor/status-bar": "^5.0.6",
+    "@ionic/angular": "^7.5.7",
+    "@ionic/storage": "^4.0.0",
+    "@po-ui/ng-components": "17.0.0-next.19",
+    "@po-ui/ng-sync": "17.0.0-next.19",
+    "@po-ui/ng-templates": "17.0.0-next.19",
+    "core-js": "3.33.3",
     "hammerjs": "^2.0.8",
     "lokijs": "^1.5.12",
-    "rxjs": "~7.5.5",
-    "tslib": "^2.0.0",
-    "zone.js": "~0.13.1"
+    "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": "^16.2.2",
-    "@angular/compiler-cli": "^16.2.2",
-    "@angular/language-service": "^16.2.2",
-    "@capacitor/cli": "^4.6.3",
-    "@ionic/angular-toolkit": "^4.0.0",
-    "@types/jasmine": "^3.3.8",
-    "@types/jasminewd2": "~2.0.3",
-    "@types/node": "~8.9.4",
-    "codelyzer": "^6.0.0",
-    "jasmine-core": "~3.8.0",
+    "@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",
+    "@capacitor/cli": "^5.5.1",
+    "@ionic/angular-toolkit": "^10.0.0",
+    "@types/jasmine": "^5.1.4",
+    "@types/jasminewd2": "~2.0.13",
+    "@types/node": "~20.10.3",
+    "codelyzer": "^6.0.2",
+    "jasmine-core": "~5.1.1",
     "jasmine-spec-reporter": "~7.0.0",
-    "karma": "~6.3.2",
-    "karma-chrome-launcher": "~3.1.0",
-    "karma-coverage": "~2.0.3",
+    "karma": "~6.4.2",
+    "karma-chrome-launcher": "~3.2.0",
+    "karma-coverage": "~2.2.1",
     "karma-coverage-istanbul-reporter": "^3.0.3",
-    "karma-jasmine": "~4.0.1",
-    "karma-jasmine-html-reporter": "^1.7.0",
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "^2.1.0",
     "prettier": "^2.1.2",
     "protractor": "~7.0.0",
-    "ts-node": "~9.0.0",
+    "ts-node": "~10.9.1",
     "tslint": "~6.1.0",
-    "typescript": "~4.9.5"
+    "typescript": "~5.2.2"
   },
   "description": "An Ionic project"
-}
+}
diff --git a/po-sample-app-conference/src/app/speaker-list/speaker-list.component.html b/po-sample-app-conference/src/app/speaker-list/speaker-list.component.html
@@ -8,38 +8,44 @@
 </ion-header>
 
 <ion-content>
-
   <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
     <ion-refresher-content></ion-refresher-content>
   </ion-refresher>
 
-  <ion-virtual-scroll [items]="speakers" approxItemHeight="457px">
-
-    <ion-list *virtualItem="let speaker; let itemBounds = bounds;">
-
-      <ion-item lines="full" class="ion-margin-top">
+  <cdk-virtual-scroll-viewport itemSize="56" minBufferPx="900" maxBufferPx="1350" style="width: 100%; height: 100%">
+    <ion-list>
+      <ion-item *cdkVirtualFor="let speaker of speakers" lines="full" class="ion-margin-top">
         <ion-avatar slot="start">
-          <img src="../../assets/imgs/po/{{ speaker.photo }}" alt="Speaker profile pic">
+          <img src="../../assets/imgs/po/{{ speaker.photo }}" alt="Speaker profile pic" />
         </ion-avatar>
 
         <ion-label>
           <h1 class="ion-padding-start">{{ speaker.name }}</h1>
           <div *ngFor="let lecture of speaker.lectures">
-            <a class="ion-padding-start lecture-link" routerLink="/lecture-detail/{{ lecture.id }}">{{ lecture.title }}</a>
+            <a class="ion-padding-start lecture-link" routerLink="/lecture-detail/{{ lecture.id }}">{{
+              lecture.title
+            }}</a>
           </div>
 
-          <ion-button class="ion-margin-start ion-margin-vertical" size="small" routerLink="/speaker-detail/{{speaker.id}}">
-            <ion-icon class="ion-padding-end" name='information-circle'></ion-icon>
+          <ion-button
+            class="ion-margin-start ion-margin-vertical"
+            size="small"
+            routerLink="/speaker-detail/{{ speaker.id }}"
+          >
+            <ion-icon class="ion-padding-end" name="information-circle"></ion-icon>
             About
           </ion-button>
 
-          <ion-button class="ion-margin-start ion-margin-top ion-margin-vertical"  size="small" (click)="openContact(speaker)">
-            <ion-icon class="ion-padding-end" name='mail'></ion-icon>
+          <ion-button
+            class="ion-margin-start ion-margin-top ion-margin-vertical"
+            size="small"
+            (click)="openContact(speaker)"
+          >
+            <ion-icon class="ion-padding-end" name="mail"></ion-icon>
             Contact
           </ion-button>
         </ion-label>
       </ion-item>
-
     </ion-list>
-  </ion-virtual-scroll>
+  </cdk-virtual-scroll-viewport>
 </ion-content>
diff --git a/po-sample-app-conference/src/app/speaker-list/speaker-list.module.ts b/po-sample-app-conference/src/app/speaker-list/speaker-list.module.ts
@@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
 import { IonicModule } from '@ionic/angular';
+import { ScrollingModule } from '@angular/cdk/scrolling';
 
 import { SpeakerListComponentRoutingModule } from './speaker-list.routing';
 import { SpeakerListComponent } from './speaker-list.component';
@@ -10,6 +11,7 @@ import { SpeakerListComponent } from './speaker-list.component';
   imports: [
     CommonModule,
     IonicModule,
+    ScrollingModule,
     SpeakerListComponentRoutingModule,
   ],
   declarations: [SpeakerListComponent]