remove resolvers to improve ux

src/app/app.module.ts

@@ -1,24 +1,15 @@
-import {
-  HttpClientModule,
-  HttpClient,
-  HTTP_INTERCEPTORS
-} from '@angular/common/http';
+import { HttpClientModule, HttpClient } from '@angular/common/http';
 import { NgModule, APP_INITIALIZER } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouteReuseStrategy } from '@angular/router';
-import { MoreItemResolver } from '@app/resolvers/more-item.resolver';
-import { MoreResolver } from '@app/resolvers/more.resolver';
-import { LoadingInterceptor } from '@app/services/loading/loading.service';
 import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
 import { registerLocaleData } from '@angular/common';
 import localeFr from '@angular/common/locales/fr';
 
 import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 
-import { TrekContextResolver } from '@app/resolvers/trek.resolver';
-import { TreksContextResolver } from '@app/resolvers/treks.resolver';
 import { BackgroundGeolocation } from '@ionic-native/background-geolocation/ngx';
 
 import { File } from '@ionic-native/file/ngx';
@@ -105,12 +96,7 @@ registerLocaleData(localeFr, 'fr');
     Network,
     FirebaseAnalytics,
     DeviceOrientation,
-    MoreResolver,
-    MoreItemResolver,
-    TrekContextResolver,
-    TreksContextResolver,
     { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
-    { provide: HTTP_INTERCEPTORS, useClass: LoadingInterceptor, multi: true },
     {
       provide: APP_INITIALIZER,
       useFactory:

src/app/interfaces/interfaces.ts

@@ -271,26 +271,3 @@ export interface TreksService {
   getMapConfigForTrekById(trek: Trek, isOffline: boolean): MapboxOptions;
   getCommonImgSrc(): string;
 }
-
-/* Navigation contexts */
-
-export interface TrekContext {
-  offline: boolean;
-  pois: Pois;
-  originalTrek: Trek;
-  trek: HydratedTrek;
-  treksTool: TreksService;
-  mapConfig: MapboxOptions;
-  touristicContents: TouristicContents;
-  touristicCategoriesWithFeatures: TouristicCategoryWithFeatures[];
-  touristicEvents: TouristicEvents;
-  commonSrc: string;
-  isStage: boolean;
-  parentTrek: Trek | null;
-}
-
-export interface TreksContext {
-  offline: boolean;
-  treksTool: TreksService;
-  mapConfig: any;
-}

src/app/pages/more/more-item/more-item.module.ts

@@ -4,19 +4,14 @@ import { RouterModule, Routes } from '@angular/router';
 import { IonicModule } from '@ionic/angular';
 import { TranslateModule } from '@ngx-translate/core';
 
-import { MoreItemResolver } from '@app/resolvers/more-item.resolver';
 import { SharedUiModule } from '@app/shared/shared-ui.module';
 
 import { MoreItemPage } from './more-item.page';
 
 const routes: Routes = [
   {
     path: '',
-    component: MoreItemPage,
-    runGuardsAndResolvers: 'always',
-    resolve: {
-      item: MoreItemResolver
-    }
+    component: MoreItemPage
   }
 ];
 

src/app/pages/more/more-item/more-item.page.html

@@ -7,15 +7,26 @@
   </ion-toolbar>
 </ion-header>
 <ion-content>
-  <app-connect-error
-    *ngIf="connectionError; else moreItemTemplate"
-    icon="wifi"
-    [title]="'error.title' | translate"
-    [content]="'error.contentMoreItem' | translate"
-    [buttonText]="'error.buttonText' | translate"
-    (retry)="refresh()"
-  >
-  </app-connect-error>
+  <ng-container *ngIf="connectionError || !moreItem; else moreItemTemplate">
+    <ng-container *ngIf="!moreItem; else connectError">
+      <div class="spinner-container">
+        <ion-spinner color="primary"></ion-spinner>
+      </div>
+    </ng-container>
+
+    <ng-template #connectError>
+      <app-connect-error
+        *ngIf="connectionError"
+        icon="wifi"
+        [title]="'error.title' | translate"
+        [content]="'error.contentMore' | translate"
+        [buttonText]="'error.buttonText' | translate"
+        (retry)="refresh()"
+      >
+      </app-connect-error>
+    </ng-template>
+  </ng-container>
+
   <ng-template #moreItemTemplate>
     <ion-grid fixed *ngIf="!!moreItem">
       <ion-row>

src/app/pages/more/more-item/more-item.page.ts

@@ -1,40 +1,42 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
-import { ActivatedRoute, Data, Router } from '@angular/router';
-import { Subscription } from 'rxjs';
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
 
 import { InformationItem } from '@app/interfaces/interfaces';
+import { MoreInformationsService } from '@app/services/more-informations/more-informations.service';
+import { first } from 'rxjs/operators';
 
 @Component({
   selector: 'app-more-item',
   templateUrl: './more-item.page.html',
   styleUrls: ['./more-item.page.scss']
 })
-export class MoreItemPage implements OnInit, OnDestroy {
+export class MoreItemPage implements OnInit {
   moreItem: InformationItem;
   moreItemId: number;
   connectionError = false;
-  private moreItemSubscription: Subscription;
 
-  constructor(private route: ActivatedRoute, private router: Router) {}
+  constructor(
+    private route: ActivatedRoute,
+    private router: Router,
+    private more: MoreInformationsService
+  ) {}
 
   ngOnInit() {
-    this.moreItemSubscription = this.route.data.subscribe((data: Data) => {
-      const item = data['item'] as InformationItem | 'connectionError';
-      if (item === 'connectionError') {
-        this.connectionError = true;
-      } else {
-        if (!this.moreItem) {
-          this.connectionError = false;
-          this.moreItem = item;
-        }
-      }
-    });
-  }
+    const moreItemId = +(<string>(
+      this.route.snapshot.paramMap.get('moreItemId')
+    ));
 
-  ngOnDestroy(): void {
-    if (this.moreItemSubscription) {
-      this.moreItemSubscription.unsubscribe();
-    }
+    this.more
+      .getMoreItemById(moreItemId)
+      .pipe(first())
+      .subscribe(
+        (moreItem) => {
+          this.moreItem = moreItem;
+        },
+        () => {
+          this.connectionError = true;
+        }
+      );
   }
 
   refresh() {

src/app/pages/more/more.module.ts

@@ -1,7 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { MoreResolver } from '@app/resolvers/more.resolver';
 import { SharedUiModule } from '@app/shared/shared-ui.module';
 import { IonicModule } from '@ionic/angular';
 import { TranslateModule } from '@ngx-translate/core';
@@ -11,11 +10,7 @@ import { MorePage } from './more.page';
 const routes: Routes = [
   {
     path: '',
-    runGuardsAndResolvers: 'always',
-    component: MorePage,
-    resolve: {
-      items: MoreResolver
-    }
+    component: MorePage
   }
 ];
 

src/app/pages/more/more.page.html

@@ -5,28 +5,42 @@
 </ion-header>
 
 <ion-content>
-  <app-connect-error
-    *ngIf="connectionError"
-    icon="wifi"
-    [title]="'error.title' | translate"
-    [content]="'error.contentMore' | translate"
-    [buttonText]="'error.buttonText' | translate"
-    (retry)="refresh()"
+  <ng-container
+    *ngIf="connectionError || !moreInformationsIntro; else moreInformationsIntroTemplate"
   >
-  </app-connect-error>
+    <ng-container *ngIf="!moreInformationsIntro; else connectError">
+      <div class="spinner-container">
+        <ion-spinner color="primary"></ion-spinner>
+      </div>
+    </ng-container>
 
-  <div *ngIf="moreInformationsIntro">
-    <ion-list>
-      <ion-item
-        class="no-outline"
-        detail="true"
-        *ngFor="let moreInformationIntro of moreInformationsIntro"
-        routerLink="/more/{{ moreInformationIntro.id }}"
+    <ng-template #connectError>
+      <app-connect-error
+        *ngIf="connectionError"
+        icon="wifi"
+        [title]="'error.title' | translate"
+        [content]="'error.contentMore' | translate"
+        [buttonText]="'error.buttonText' | translate"
+        (retry)="refresh()"
       >
-        <ion-label>
-          <h3>{{ moreInformationIntro.title }}</h3>
-        </ion-label>
-      </ion-item>
-    </ion-list>
-  </div>
+      </app-connect-error>
+    </ng-template>
+  </ng-container>
+
+  <ng-template #moreInformationsIntroTemplate>
+    <div *ngIf="moreInformationsIntro">
+      <ion-list>
+        <ion-item
+          class="no-outline"
+          detail="true"
+          *ngFor="let moreInformationIntro of moreInformationsIntro"
+          routerLink="/more/{{ moreInformationIntro.id }}"
+        >
+          <ion-label>
+            <h3>{{ moreInformationIntro.title }}</h3>
+          </ion-label>
+        </ion-item>
+      </ion-list>
+    </div>
+  </ng-template>
 </ion-content>

src/app/pages/more/more.page.ts

@@ -1,43 +1,35 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
-import { Subscription } from 'rxjs';
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { first } from 'rxjs/operators';
 
 import { environment } from '@env/environment';
 import { InformationIntro } from '@app/interfaces/interfaces';
+import { MoreInformationsService } from '@app/services/more-informations/more-informations.service';
 
 @Component({
   selector: 'app-more',
   templateUrl: './more.page.html',
   styleUrls: ['./more.page.scss']
 })
-export class MorePage implements OnInit, OnDestroy {
+export class MorePage implements OnInit {
+  public appName: string = environment.appName;
   moreInformationsIntro: InformationIntro[];
   connectionError = false;
-  public appName: string = environment.appName;
-  private moreInformationsIntroSubscription: Subscription;
 
-  constructor(private route: ActivatedRoute, private router: Router) {}
+  constructor(private router: Router, private more: MoreInformationsService) {}
 
   ngOnInit(): void {
-    this.moreInformationsIntroSubscription = this.route.data.subscribe(
-      (data) => {
-        const items: InformationIntro[] | 'connectionError' = data.items;
-        if (items === 'connectionError') {
+    this.more
+      .getMoreItems()
+      .pipe(first())
+      .subscribe(
+        (moreItems) => {
+          this.moreInformationsIntro = moreItems;
+        },
+        () => {
           this.connectionError = true;
-        } else {
-          if (!this.moreInformationsIntro) {
-            this.connectionError = false;
-            this.moreInformationsIntro = items;
-          }
         }
-      }
-    );
-  }
-
-  ngOnDestroy(): void {
-    if (this.moreInformationsIntroSubscription) {
-      this.moreInformationsIntroSubscription.unsubscribe();
-    }
+      );
   }
 
   public refresh() {

src/app/pages/tabs/tabs.routing.module.ts

@@ -1,6 +1,5 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { TreksContextResolver } from '@app/resolvers/treks.resolver';
 import { TreksPage } from '../treks/treks.page';
 import { TabsPage } from './tabs.page';
 
@@ -14,10 +13,7 @@ const routes: Routes = [
         children: [
           {
             path: '',
-            component: TreksPage,
-            resolve: {
-              context: TreksContextResolver
-            }
+            component: TreksPage
           }
         ]
       },
@@ -27,10 +23,7 @@ const routes: Routes = [
           {
             path: '',
             component: TreksPage,
-            data: { offline: true },
-            resolve: {
-              context: TreksContextResolver
-            }
+            data: { offline: true }
           }
         ]
       },

src/app/pages/trek-details/trek-details.module.ts

@@ -4,19 +4,14 @@ import { IonicModule } from '@ionic/angular';
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
-import { TrekContextResolver } from '@app/resolvers/trek.resolver';
 import { SharedTreksModule } from '@app/shared/shared-treks.module';
 import { SharedUiModule } from '@app/shared/shared-ui.module';
 import { TrekDetailsPage } from './trek-details.page';
-import { CustomPipesModule } from '@app/shared/custom-pipes.module';
+import { PoiComponent } from '@app/components/poi/poi.component';
 
 const routes: Routes = [
   {
     path: '',
-    runGuardsAndResolvers: 'always',
-    resolve: {
-      context: TrekContextResolver
-    },
     component: TrekDetailsPage
   }
 ];
@@ -28,9 +23,8 @@ const routes: Routes = [
     RouterModule.forChild(routes),
     SharedTreksModule,
     SharedUiModule,
-    TranslateModule.forChild(),
-    CustomPipesModule
+    TranslateModule.forChild()
   ],
-  declarations: [TrekDetailsPage]
+  declarations: [TrekDetailsPage, PoiComponent]
 })
 export class TrekDetailsPageModule {}