feat: migrate to angular standalone components assemblage (#1119)

BREAKING CHANGE

.eslintrc.json

@@ -1,9 +1,9 @@
 {
   "root": true,
-  "plugins": ["unused-imports"],
   "overrides": [
     {
       "files": ["*.ts"],
+      "plugins": ["unused-imports"],
       "extends": [
         "plugin:@angular-eslint/recommended",
         "plugin:@angular-eslint/template/process-inline-templates"

src/app/app.component.html

@@ -11,8 +11,8 @@
         ? 'portal-with-header-footer'
         : 'portal-with-header'
       : hasFooter
-      ? 'portal-with-footer'
-      : 'portal'
+        ? 'portal-with-footer'
+        : 'portal'
   "
   igoStopDropPropagation
 ></app-portal>

src/app/app.component.ts

@@ -1,21 +1,32 @@
-import { DOCUMENT } from '@angular/common';
+import { DOCUMENT, NgClass, NgIf } from '@angular/common';
 import { Component, Inject, OnInit } from '@angular/core';
 import { Meta, Title } from '@angular/platform-browser';
 import { NavigationEnd, Router } from '@angular/router';
 
-import { AuthOptions } from '@igo2/auth';
+import { AuthFormComponent, AuthOptions } from '@igo2/auth';
+import { SpinnerComponent, StopPropagationDirective } from '@igo2/common';
 import { ConfigService, LanguageService, MessageService } from '@igo2/core';
-import { AnalyticsListenerService, AppOptions } from '@igo2/integration';
+import { AppOptions } from '@igo2/integration';
 import { DomUtils, userAgent } from '@igo2/utils';
 
 import { delay, first } from 'rxjs';
 
+import { PortalComponent } from './pages/portal/portal.component';
 import { PwaService } from './services/pwa.service';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
+  styleUrls: ['./app.component.scss'],
+  standalone: true,
+  imports: [
+    SpinnerComponent,
+    StopPropagationDirective,
+    NgIf,
+    AuthFormComponent,
+    PortalComponent,
+    NgClass
+  ]
 })
 export class AppComponent implements OnInit {
   public authConfig: AuthOptions;
@@ -27,7 +38,6 @@ export class AppComponent implements OnInit {
     @Inject(DOCUMENT) private document: Document,
     protected languageService: LanguageService,
     private configService: ConfigService,
-    private analyticsListenerService: AnalyticsListenerService,
     private titleService: Title,
     private metaService: Meta,
     private messageService: MessageService,
@@ -39,8 +49,6 @@ export class AppComponent implements OnInit {
     this.readTitleConfig();
     this.readDescriptionConfig();
 
-    this.analyticsListenerService.listen();
-
     this.detectOldBrowser();
 
     this.hasHeader = this.configService.getConfig('header.hasHeader', false);

src/app/pages/footer/footer.component.ts

@@ -2,10 +2,14 @@ import { Component } from '@angular/core';
 
 import { LanguageService } from '@igo2/core';
 
+import { TranslateModule } from '@ngx-translate/core';
+
 @Component({
   selector: 'app-footer',
   templateUrl: './footer.component.html',
-  styleUrls: ['./footer.component.scss']
+  styleUrls: ['./footer.component.scss'],
+  standalone: true,
+  imports: [TranslateModule]
 })
 export class FooterComponent {
   constructor(protected languageService: LanguageService) {}

src/app/pages/header/header.component.ts

@@ -1,11 +1,16 @@
 import { Component } from '@angular/core';
+import { MatToolbarModule } from '@angular/material/toolbar';
 
 import { ConfigService, LanguageService } from '@igo2/core';
 
+import { TranslateModule } from '@ngx-translate/core';
+
 @Component({
   selector: 'app-header',
   templateUrl: './header.component.html',
-  styleUrls: ['./header.component.scss']
+  styleUrls: ['./header.component.scss'],
+  standalone: true,
+  imports: [MatToolbarModule, TranslateModule]
 })
 export class HeaderComponent {
   public headerLogo: string;

src/app/pages/portal/expansion-panel/expansion-panel-header.component.ts

@@ -7,11 +7,15 @@ import {
   Output
 } from '@angular/core';
 
+import { ExpansionPanelButtonComponent } from './expansion-panel-button/expansion-panel-button.component';
+
 @Component({
   selector: 'app-expansion-panel-header',
   templateUrl: './expansion-panel-header.component.html',
   styleUrls: ['./expansion-panel-header.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [ExpansionPanelButtonComponent]
 })
 export class ExpansionPanelHeaderComponent {
   @Input() expanded: boolean;

src/app/pages/portal/expansion-panel/expansion-panel.component.ts

@@ -7,14 +7,19 @@ import {
   Output
 } from '@angular/core';
 
+import { BackdropComponent } from '@igo2/common';
+
+import { ExpansionPanelHeaderComponent } from './expansion-panel-header.component';
 import { showContent } from './expansion-panel.animations';
 
 @Component({
   selector: 'app-expansion-panel',
   templateUrl: './expansion-panel.component.html',
   styleUrls: ['./expansion-panel.component.scss'],
   animations: [showContent()],
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [BackdropComponent, ExpansionPanelHeaderComponent]
 })
 export class ExpansionPanelComponent {
   @Input()

src/app/pages/portal/map-overlay/map-overlay.component.ts

@@ -1,3 +1,4 @@
+import { NgClass, NgFor, NgIf, NgStyle } from '@angular/common';
 import { AfterViewInit, Component, OnDestroy } from '@angular/core';
 
 import { Context, ContextService } from '@igo2/context';
@@ -10,7 +11,9 @@ import { MapOverlay } from './map-overlay.interface';
 @Component({
   selector: 'app-map-overlay',
   templateUrl: './map-overlay.component.html',
-  styleUrls: ['./map-overlay.component.scss']
+  styleUrls: ['./map-overlay.component.scss'],
+  standalone: true,
+  imports: [NgFor, NgClass, NgIf, NgStyle]
 })
 export class MapOverlayComponent implements AfterViewInit, OnDestroy {
   public mapOverlay: MapOverlay[] = [];