refactor: standalone architecture

transform the entire app into a standalone architecture by removing modules and add lazy loading

src/app/app.component.ts

@@ -1,9 +1,12 @@
 import { Component } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
 
 @Component({
   selector: 'app-root',
   templateUrl: 'app.component.html',
-  styleUrls: ['app.component.scss']
+  styleUrls: ['app.component.scss'],
+  standalone: true,
+  imports: [IonicModule]
 })
 export class AppComponent {
   constructor() {}

src/app/business/components/business-card/business-card.component.ts

@@ -1,10 +1,15 @@
 import { Component, Input } from '@angular/core';
 import { Business } from 'swissparl';
+import { NgFor, NgIf } from '@angular/common';
+import { TextCardComponent } from '../../../shared/components/text-card/text-card.component';
+import { ODataDateTimePipe } from '../../../shared/pipes/o-data-date-time.pipe';
 
 @Component({
   selector: 'app-business-card',
   templateUrl: './business-card.component.html',
-  styleUrls: ['./business-card.component.scss']
+  styleUrls: ['./business-card.component.scss'],
+  standalone: true,
+  imports: [NgIf, NgFor, TextCardComponent, ODataDateTimePipe]
 })
 export class BusinessCardComponent {
   @Input() business: Business;

src/app/business/components/business-detail-text/business-detail-text.component.ts

@@ -1,11 +1,15 @@
 import { Component, Input } from '@angular/core';
 import { Browser } from '@capacitor/browser';
 import { Business } from 'swissparl';
+import { TextCardComponent } from '../../../shared/components/text-card/text-card.component';
+import { IonicModule } from '@ionic/angular';
 
 @Component({
   selector: 'app-business-detail-text',
   templateUrl: './business-detail-text.component.html',
-  styleUrls: ['./business-detail-text.component.scss']
+  styleUrls: ['./business-detail-text.component.scss'],
+  standalone: true,
+  imports: [IonicModule, TextCardComponent]
 })
 export class BusinessDetailTextComponent {
   @Input() business: Business;

src/app/business/container/business-detail/business-detail.page.ts

@@ -5,12 +5,27 @@ import { BusinessService } from '../../services/business.service';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { catchError, first, switchMap, tap } from 'rxjs/operators';
 import { Subject, from, of } from 'rxjs';
+import { IonicModule } from '@ionic/angular';
+import { BusinessCardComponent } from '../../components/business-card/business-card.component';
+import { BusinessDetailTextComponent } from '../../components/business-detail-text/business-detail-text.component';
+import { LoadingScreenComponent } from '../../../shared/components/loading-screen/loading-screen.component';
+import { ErrorScreenComponent } from '../../../shared/components/error-screen/error-screen.component';
+import { NgIf } from '@angular/common';
 
 @UntilDestroy()
 @Component({
   selector: 'app-business-detail',
   templateUrl: './business-detail.page.html',
-  styleUrls: ['./business-detail.page.scss']
+  styleUrls: ['./business-detail.page.scss'],
+  standalone: true,
+  imports: [
+    NgIf,
+    IonicModule,
+    BusinessCardComponent,
+    BusinessDetailTextComponent,
+    LoadingScreenComponent,
+    ErrorScreenComponent
+  ]
 })
 export class BusinessDetailPage implements OnInit {
   business: Business = null;

src/app/business/container/business-list/business-list.page.ts

@@ -4,17 +4,39 @@ import { BehaviorSubject, Subject, combineLatest, from, of } from 'rxjs';
 import { map, first, tap, catchError, switchMap } from 'rxjs/operators';
 import { Business, BusinessStatus, BusinessType } from 'swissparl';
 import { BusinessService } from '../../services/business.service';
-import { FormArray, FormBuilder, FormControl, FormGroup } from '@angular/forms';
+import {
+  FormArray,
+  FormBuilder,
+  FormControl,
+  FormGroup,
+  ReactiveFormsModule
+} from '@angular/forms';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import * as _ from 'lodash';
-import { IonSearchbar, Platform } from '@ionic/angular';
+import { IonicModule, IonSearchbar, Platform } from '@ionic/angular';
 import { Keyboard } from '@capacitor/keyboard';
+import { NgFor, NgIf } from '@angular/common';
+import { BusinessCardComponent } from '../../components/business-card/business-card.component';
+import { LoadingScreenComponent } from '../../../shared/components/loading-screen/loading-screen.component';
+import { ErrorScreenComponent } from '../../../shared/components/error-screen/error-screen.component';
+import { NoContentScreenComponent } from '../../../shared/components/no-content-screen/no-content-screen.component';
 
 @UntilDestroy()
 @Component({
   selector: 'app-business-list',
   templateUrl: './business-list.page.html',
-  styleUrls: ['./business-list.page.scss']
+  styleUrls: ['./business-list.page.scss'],
+  standalone: true,
+  imports: [
+    NgIf,
+    NgFor,
+    IonicModule,
+    ReactiveFormsModule,
+    BusinessCardComponent,
+    LoadingScreenComponent,
+    ErrorScreenComponent,
+    NoContentScreenComponent
+  ]
 })
 export class BusinessListComponent implements OnInit {
   top = 20;
@@ -125,7 +147,7 @@ export class BusinessListComponent implements OnInit {
         if (businessTypes === null) {
           return;
         }
-        businessTypes.forEach((type) => {
+        businessTypes.forEach(() => {
           const control = new FormControl(false);
           (this.filterForm.controls.businessType as FormArray).push(control);
         });

src/app/business/routes.ts

@@ -0,0 +1,23 @@
+import { Route } from '@angular/router';
+
+export const BUSINESS_ROUTES: Route[] = [
+  {
+    path: 'list',
+    loadComponent: () =>
+      import('./container/business-list/business-list.page').then(
+        (m) => m.BusinessListComponent
+      )
+  },
+  {
+    path: 'detail/:id',
+    loadComponent: () =>
+      import('./container/business-detail/business-detail.page').then(
+        (m) => m.BusinessDetailPage
+      )
+  },
+  {
+    path: '',
+    redirectTo: 'list',
+    pathMatch: 'full'
+  }
+];

src/app/council-member/components/council-member-card/council-member-card.component.ts

@@ -1,10 +1,13 @@
 import { Component, Input } from '@angular/core';
 import { MemberCouncil } from 'swissparl';
+import { LowerCasePipe } from '@angular/common';
 
 @Component({
   selector: 'app-council-member-card',
   templateUrl: './council-member-card.component.html',
-  styleUrls: ['./council-member-card.component.scss']
+  styleUrls: ['./council-member-card.component.scss'],
+  standalone: true,
+  imports: [LowerCasePipe]
 })
 export class CouncilMemberCardComponent {
   @Input() councilMember: MemberCouncil;

src/app/council-member/containers/member-detail/member-detail.component.ts

@@ -5,12 +5,28 @@ import { CouncilMemberService } from '../../services/council-member.service';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { catchError, first, switchMap, tap } from 'rxjs/operators';
 import { Subject, from, of } from 'rxjs';
+import { IonicModule } from '@ionic/angular';
+import { CouncilMemberCardComponent } from '../../components/council-member-card/council-member-card.component';
+import { TextCardComponent } from '../../../shared/components/text-card/text-card.component';
+import { NgFor, NgIf } from '@angular/common';
+import { LoadingScreenComponent } from '../../../shared/components/loading-screen/loading-screen.component';
+import { ErrorScreenComponent } from '../../../shared/components/error-screen/error-screen.component';
 
 @UntilDestroy()
 @Component({
   selector: 'app-member-detail',
   templateUrl: './member-detail.component.html',
-  styleUrls: ['./member-detail.component.scss']
+  styleUrls: ['./member-detail.component.scss'],
+  standalone: true,
+  imports: [
+    NgIf,
+    NgFor,
+    IonicModule,
+    CouncilMemberCardComponent,
+    TextCardComponent,
+    LoadingScreenComponent,
+    ErrorScreenComponent
+  ]
 })
 export class MemberDetailComponent implements OnInit {
   councilMember: MemberCouncil = null;

src/app/council-member/containers/member-list/member-list.component.ts

@@ -4,15 +4,39 @@ import { BehaviorSubject, Subject, combineLatest, of } from 'rxjs';
 import { catchError, first, switchMap, tap } from 'rxjs/operators';
 import { MemberCouncil } from 'swissparl';
 import { CouncilMemberService } from '../../services/council-member.service';
-import { FormArray, FormBuilder, FormControl, FormGroup } from '@angular/forms';
+import {
+  FormArray,
+  FormBuilder,
+  FormControl,
+  FormGroup,
+  ReactiveFormsModule
+} from '@angular/forms';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
-import { IonSearchbar } from '@ionic/angular';
+import { IonicModule, IonSearchbar } from '@ionic/angular';
+import { NgFor, NgIf } from '@angular/common';
+import { HideKeyboardOnEnterDirective } from '../../../shared/directives/hide-keyboard-on-enter.directive';
+import { CouncilMemberCardComponent } from '../../components/council-member-card/council-member-card.component';
+import { LoadingScreenComponent } from '../../../shared/components/loading-screen/loading-screen.component';
+import { NoContentScreenComponent } from '../../../shared/components/no-content-screen/no-content-screen.component';
+import { ErrorScreenComponent } from '../../../shared/components/error-screen/error-screen.component';
 
 @UntilDestroy()
 @Component({
   selector: 'app-member-list',
   templateUrl: './member-list.component.html',
-  styleUrls: ['./member-list.component.scss']
+  styleUrls: ['./member-list.component.scss'],
+  standalone: true,
+  imports: [
+    NgIf,
+    NgFor,
+    IonicModule,
+    ReactiveFormsModule,
+    CouncilMemberCardComponent,
+    HideKeyboardOnEnterDirective,
+    LoadingScreenComponent,
+    NoContentScreenComponent,
+    ErrorScreenComponent
+  ]
 })
 export class MemberListComponent implements OnInit {
   top = 50;

src/app/council-member/routes.ts

@@ -0,0 +1,23 @@
+import { Route } from '@angular/router';
+
+export const COUNCIL_MEMBER_ROUTES: Route[] = [
+  {
+    path: 'list',
+    loadComponent: () =>
+      import('./containers/member-list/member-list.component').then(
+        (m) => m.MemberListComponent
+      )
+  },
+  {
+    path: 'detail/:id',
+    loadComponent: () =>
+      import('./containers/member-detail/member-detail.component').then(
+        (m) => m.MemberDetailComponent
+      )
+  },
+  {
+    path: '',
+    redirectTo: 'list',
+    pathMatch: 'full'
+  }
+];

src/app/layout/containers/tab-layout/tab-layout.page.ts

@@ -1,9 +1,12 @@
 import { Component } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
 
 @Component({
   selector: 'app-tab-layout',
   templateUrl: 'tab-layout.page.html',
-  styleUrls: ['tab-layout.page.scss']
+  styleUrls: ['tab-layout.page.scss'],
+  standalone: true,
+  imports: [IonicModule]
 })
 export class TabLayoutPage {
   constructor() {}