refactor: fix new Angular warnings

frontend/app/src/app/modules/catalog/catalog.component.html

@@ -23,7 +23,7 @@
   </ion-toolbar>
   <ion-toolbar color="primary" mode="md">
     <ion-segment (ionChange)="segmentChanged($event)" [value]="selectedSemesterUID" mode="md">
-      @for (semester of availableSemesters; track semester) {
+      @for (semester of availableSemesters; track semester.uid) {
         <ion-segment-button [value]="semester.uid">
           <ion-label>{{ semester.acronym }}</ion-label>
         </ion-segment-button>
@@ -35,7 +35,7 @@
 <ion-content>
   @if (catalogs && catalogs.length > 0) {
     <ion-list>
-      @for (catalog of catalogs; track catalog) {
+      @for (catalog of catalogs; track catalog.uid) {
         <ion-item button="true" lines="inset" (click)="notifySelect(catalog)">
           <ion-label>
             <h2>{{ catalog.name }}</h2>
@@ -46,7 +46,7 @@
   }
   @if (!catalogs) {
     <ion-list>
-      @for (skeleton of [].constructor(10); track skeleton) {
+      @for (skeleton of [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; track skeleton) {
         <stapps-skeleton-list-item> </stapps-skeleton-list-item>
       }
     </ion-list>

frontend/app/src/app/modules/dashboard/sections/favorites-section/favorites-section.component.html

@@ -19,7 +19,7 @@
   </ion-button>
   @if (items | async; as items) {
     <simple-swiper @fade>
-      @for (item of items; track item) {
+      @for (item of items; track item.uid) {
         <stapps-data-list-item
           [hideThumbnail]="true"
           [listItemEndInteraction]="false"

frontend/app/src/app/modules/dashboard/sections/jobs-section/job-section.component.html

@@ -19,7 +19,7 @@
   </ion-button>
   @if (jobs | async; as jobs) {
     <simple-swiper @fade>
-      @for (item of jobs; track item) {
+      @for (item of jobs; track item.uid) {
         <stapps-data-list-item
           [hideThumbnail]="true"
           [item]="item"

frontend/app/src/app/modules/dashboard/sections/mensa-section/mensa-section-content.component.html

@@ -16,7 +16,7 @@
 @if (dishes | async; as dishes) {
   @if (dishes.length > 0) {
     <simple-swiper @fade>
-      @for (dish of dishes; track dish) {
+      @for (dish of dishes; track dish.uid) {
         <stapps-data-list-item
           [hideThumbnail]="true"
           [item]="dish"

frontend/app/src/app/modules/dashboard/sections/mensa-section/mensa-section.component.html

@@ -15,7 +15,7 @@
 
 @if (items | async; as items) {
   @if (items.length !== 0) {
-    @for (item of items; track item) {
+    @for (item of items; track item.uid) {
       <stapps-section @fade [item]="item" [title]="'name' | thingTranslate: item">
         <ion-button slot="button-end" fill="clear" color="medium" (click)="favoritesService.delete(item)">
           <ion-icon slot="icon-only" name="delete" [size]="24"></ion-icon>

frontend/app/src/app/modules/data/elements/simple-card.html

@@ -24,7 +24,7 @@
       }
     } @else {
       @if (content && isThing(content[0])) {
-        @for (thing of $any(content); track thing) {
+        @for (thing of $any(content); track thing.uid) {
           <a [routerLink]="['/data-detail', thing.uid]">
             <p>{{ 'name' | thingTranslate: thing }}</p>
           </a>

frontend/app/src/app/modules/data/list/data-list.html

@@ -16,7 +16,7 @@
 @if (itemStream | async; as items) {
   <ng-content select="[header]"></ng-content>
   <ion-list [style.display]="items && items.length ? 'block' : 'none'">
-    @for (item of items; track item) {
+    @for (item of items; track item.uid) {
       <ng-container
         *ngTemplateOutlet="listItemTemplateRef || defaultListItem; context: {$implicit: item}"
       ></ng-container>

frontend/app/src/app/modules/data/list/simple-data-list.html

@@ -23,7 +23,7 @@
         </ion-text>
       </ion-list-header>
     }
-    @for (item of items; track item) {
+    @for (item of items; track item.uid) {
       <ng-container
         *ngTemplateOutlet="listItemTemplateRef || defaultListItem; context: {$implicit: item}"
       ></ng-container>
@@ -34,7 +34,7 @@
   }
 } @else {
   <ion-list>
-    @for (skeleton of [].constructor(skeletonItems); track skeleton) {
+    @for (skeleton of [1, 2, 3, 4, 5, 6]; track skeleton) {
       <stapps-skeleton-list-item [hideThumbnail]="singleType"> </stapps-skeleton-list-item>
     }
   </ion-list>

frontend/app/src/app/modules/data/list/tree-list-fragment.html

@@ -25,7 +25,7 @@
           </div>
         }
         <ion-list slot="content" lines="none">
-          @for (item of entry[1]._ || []; track item) {
+          @for (item of entry[1]._ || []; track item.uid) {
             <div class="tree-indicator">
               <ng-container
                 *ngTemplateOutlet="listItemTemplateRef || defaultListItem; context: {$implicit: item}"

frontend/app/src/app/modules/data/types/event/event-detail-content.html

@@ -47,7 +47,7 @@
   <ion-card>
     <ion-card-header>{{ 'superCatalogs' | propertyNameTranslate: 'catalog' | titlecase }}</ion-card-header>
     <ion-card-content>
-      @for (item of item.catalogs; track item) {
+      @for (item of item.catalogs; track item.uid) {
         <event-route-path
           [maxItems]="1"
           [itemsAfterCollapse]="1"

frontend/app/src/app/modules/data/types/person/person-detail-content.html

@@ -14,7 +14,7 @@
 -->
 @if (item.workLocations) {
   <ion-list>
-    @for (contactPoint of contactPoints; track contactPoint; let i = $index) {
+    @for (contactPoint of contactPoints; track contactPoint.uid; let i = $index) {
       <ion-card>
         <ion-card-header>
           @if (item.workLocations.length > 1) {

frontend/app/src/app/modules/map/controls/compass-control.component.ts

@@ -4,14 +4,13 @@ import {IonFabButton} from '@ionic/angular/standalone';
 import {MapService} from '@maplibre/ngx-maplibre-gl';
 import {MapEventType} from 'maplibre-gl';
 import {map, mergeMap, fromEventPattern, merge} from 'rxjs';
-import {IonIconDirective} from 'src/app/util/ion-icon/ion-icon.directive';
 
 @Component({
   selector: 'stapps-compass-control',
   templateUrl: './compass-control.html',
   styleUrl: './compass-control.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [AsyncPipe, IonIconDirective, IonFabButton],
+  imports: [AsyncPipe, IonFabButton],
 })
 export class CompassControlComponent {
   transform = this.mapService.mapCreated$.pipe(

frontend/app/src/app/modules/map/elements/poi-markers.component.ts

@@ -1,5 +1,4 @@
 import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
-import {MapIconDirective} from '../map-icon.directive';
 import {FeatureCollection, Point} from 'geojson';
 import {SCFeatureProperties} from '../feature-collection.pipe';
 import {animate, style, transition, trigger} from '@angular/animations';
@@ -19,7 +18,6 @@ import {PoiMarkerComponent} from './poi-marker.component';
   styleUrl: './poi-markers.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
-    MapIconDirective,
     MglClusterLeavesPipe,
     GeoJSONSourceComponent,
     MarkersForClustersComponent,

frontend/app/src/app/modules/map/map-page.component.ts

@@ -14,21 +14,15 @@
  */
 import {ChangeDetectionStrategy, Component} from '@angular/core';
 import {LngLatBoundsLike, MapLibreEvent} from 'maplibre-gl';
-import {
-  ControlComponent,
-  GeolocateControlDirective,
-  MapComponent,
-  ScaleControlDirective,
-} from '@maplibre/ngx-maplibre-gl';
+import {ControlComponent, MapComponent, ScaleControlDirective} from '@maplibre/ngx-maplibre-gl';
 import {TranslateModule} from '@ngx-translate/core';
-import {ActivatedRoute, RouterLink} from '@angular/router';
+import {ActivatedRoute} from '@angular/router';
 import {MapAuto3dDirective} from './map-auto-3d.directive';
 import {MediaQueryPipe} from '../../util/media-query.pipe';
 import {DataProvider} from '../data/data.provider';
 import {SCSearchFilter, SCThingType} from '@openstapps/core';
 import {DataModule} from '../data/data.module';
 import {AsyncPipe} from '@angular/common';
-import {GeolocateControlComponent} from './controls/geolocate-control.component';
 import {CompassControlComponent} from './controls/compass-control.component';
 import {MapSizeFixDirective} from './map-size-fix.directive';
 import {MapDataProvider} from './map-data.provider';
@@ -38,8 +32,7 @@ import {BuildingMarkersComponent} from './elements/building-markers.component';
 import {PoiMarkersComponent} from './elements/poi-markers.component';
 import {AttributionComponent} from './controls/attribution.component';
 import {filter, map} from 'rxjs';
-import {IonButton, IonContent, IonLabel, IonRouterLink} from '@ionic/angular/standalone';
-import {IonIconDirective} from 'src/app/util/ion-icon/ion-icon.directive';
+import {IonContent} from '@ionic/angular/standalone';
 
 /**
  * The main page of the map
@@ -62,24 +55,17 @@ import {IonIconDirective} from 'src/app/util/ion-icon/ion-icon.directive';
     CompassControlComponent,
     ControlComponent,
     DataModule,
-    GeolocateControlComponent,
-    GeolocateControlDirective,
-    IonIconDirective,
     MapAuto3dDirective,
     MapComponent,
     MapSizeFixDirective,
     MapStylePipe,
     MediaQueryPipe,
     PoiMarkersComponent,
-    RouterLink,
     ScaleControlDirective,
     ThingPoiFeatureCollectionPipe,
     ThingPolygonFeatureCollectionPipe,
     TranslateModule,
     IonContent,
-    IonLabel,
-    IonRouterLink,
-    IonButton,
   ],
 })
 export class MapPageComponent {

frontend/app/src/app/modules/map/map-widget.component.ts

@@ -14,7 +14,7 @@
  */
 import {ChangeDetectionStrategy, Component, HostBinding, Input, inject} from '@angular/core';
 import {RouterLink} from '@angular/router';
-import {ControlComponent, MapComponent, MarkerComponent} from '@maplibre/ngx-maplibre-gl';
+import {ControlComponent, MapComponent} from '@maplibre/ngx-maplibre-gl';
 import {AnimationController, IonRouterLink} from '@ionic/angular/standalone';
 import {GeoNavigationDirective} from './geo-navigation.directive';
 import {TranslateModule} from '@ngx-translate/core';
@@ -51,7 +51,6 @@ import {IonIconDirective} from 'src/app/util/ion-icon/ion-icon.directive';
     MapComponent,
     MapSizeFixDirective,
     MapStylePipe,
-    MarkerComponent,
     MediaQueryPipe,
     PoiMarkersComponent,
     RouterLink,

frontend/app/src/app/modules/news/page/news-page.html

@@ -51,7 +51,7 @@
       }
     }
     @if (news.length > 0) {
-      @for (item of news; track item) {
+      @for (item of news; track item.uid) {
         <stapps-news-item [item]="item"></stapps-news-item>
       }
     }

frontend/app/src/app/modules/profile/id-cards.component.ts

@@ -15,7 +15,7 @@
 import {ChangeDetectionStrategy, Component} from '@angular/core';
 import {IdCardsProvider} from './id-cards.provider';
 import {SCIdCard} from '@openstapps/core';
-import {AsyncPipe, TitleCasePipe} from '@angular/common';
+import {AsyncPipe} from '@angular/common';
 import {ThingTranslateModule} from '../../translation/thing-translate.module';
 import {UtilModule} from '../../util/util.module';
 import {IdCardComponent} from './id-card.component';
@@ -29,15 +29,7 @@ import {IonIconDirective} from 'src/app/util/ion-icon/ion-icon.directive';
   styleUrls: ['id-cards.scss'],
   providers: [IdCardsProvider],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [
-    AsyncPipe,
-    ThingTranslateModule,
-    UtilModule,
-    IdCardComponent,
-    TranslateModule,
-    TitleCasePipe,
-    IonIconDirective,
-  ],
+  imports: [AsyncPipe, ThingTranslateModule, UtilModule, IdCardComponent, TranslateModule, IonIconDirective],
 })
 export class IdCardsComponent {
   idCards: Observable<SCIdCard[]> = this.idCardsProvider.getIdCards();

frontend/app/src/app/translation/common-string-pipes.ts

@@ -33,7 +33,8 @@ export class ArrayJoinPipe implements PipeTransform {
     }
 
     if (!Array.isArray(anArray)) {
-      throw new SyntaxError(`Wrong parameter in ArrayJoinPipe. Expected a valid Array, received: ${anArray}`);
+      logger.warn(`Wrong parameter in ArrayJoinPipe. Expected a valid Array, received: ${anArray}`);
+      return '';
     }
 
     this.value = anArray.join(separator);
@@ -77,9 +78,10 @@ export class SentenceCasePipe implements PipeTransform {
 
   transform(aString: string | unknown): string {
     if (typeof aString !== 'string') {
-      throw new SyntaxError(
-        `Wrong parameter in StringSplitPipe. Expected a valid String, received: ${aString}`,
-      );
+      if (aString !== undefined) {
+        logger.warn(`Wrong parameter in SentenceCasePipe. Expected a valid String, received: ${aString}`);
+      }
+      return '';
     }
 
     this.value = aString.slice(0, 1).toUpperCase() + aString.slice(1);
@@ -103,9 +105,8 @@ export class StringSplitPipe implements PipeTransform {
     }
 
     if (typeof aString !== 'string') {
-      throw new SyntaxError(
-        `Wrong parameter in StringSplitPipe. Expected a valid String, received: ${aString}`,
-      );
+      logger.warn(`Wrong parameter in StringSplitPipe. Expected a valid String, received: ${aString}`);
+      return [];
     }
 
     this.value = aString.split(splitter);

frontend/app/src/app/translation/property-name-translate.pipe.ts

@@ -17,6 +17,7 @@ import {Subscription} from 'rxjs';
 import {TranslateService} from '@ngx-translate/core';
 import {ThingTranslateService} from './thing-translate.service';
 import {isThing, SCThings, SCThingType} from '@openstapps/core';
+import {logger} from '../_helpers/ts-logger.js';
 
 @Injectable()
 @Pipe({
@@ -51,9 +52,10 @@ export class PropertyNameTranslatePipe implements PipeTransform, OnDestroy {
     }
 
     if (!isThing(thingOrType) && typeof thingOrType !== 'string') {
-      throw new SyntaxError(
+      logger.warn(
         `Wrong parameter in ThingTranslatePipe. Expected a valid SCThing or String, received: ${thingOrType}`,
       );
+      return '';
     }
 
     // store the params, in case they change

frontend/app/src/app/translation/thing-translate.pipe.ts

@@ -17,6 +17,7 @@ import {TranslateService} from '@ngx-translate/core';
 import {isThing, SCThings, SCThingWithoutReferences} from '@openstapps/core';
 import {Subscription} from 'rxjs';
 import {ThingTranslateService} from './thing-translate.service';
+import {logger} from '../_helpers/ts-logger.js';
 
 @Injectable()
 @Pipe({
@@ -52,9 +53,8 @@ export class ThingTranslatePipe implements PipeTransform, OnDestroy {
     }
 
     if (!isThing(thing)) {
-      throw new SyntaxError(
-        `Wrong parameter in ThingTranslatePipe. Expected a valid SCThing, received: ${thing}`,
-      );
+      logger.warn(`Wrong parameter in ThingTranslatePipe. Expected a valid SCThing, received: ${thing}`);
+      return {} as never;
     }
 
     // store the params, in case they change