[develop-hydration | WIP | CHANGED] Added checks and logs for server or client state, to utilize non destructive hydration and avoid first page load flickering (affected files so far: http-interceptor.service.ts, resultLanding.component.html, resultLanding.component.ts, numbers.component.ts, search-input.component.ts, environment.ts

http-interceptor.service.ts

@@ -27,6 +27,7 @@ export class HttpInterceptorService implements HttpInterceptor {
     const storedResponse = this.transferState.get<any>(key, null);
     //console.info(key, storedResponse);
     if (storedResponse) {
+      console.log("found "+ request.url);
       const response = new HttpResponse({body: storedResponse, status: 200});
       if (!isPlatformServer(this.platformId)) {
         //console.info("browser remove: ", key);
@@ -35,6 +36,8 @@ export class HttpInterceptorService implements HttpInterceptor {
       return of(response);
     } else {
       if (isPlatformServer(this.platformId)) {
+        console.log("server request "+request.url)
+
         if(request.url.startsWith('/assets') || request.url.startsWith('assets')) {
           return of(null);
         }
@@ -50,6 +53,7 @@ export class HttpInterceptorService implements HttpInterceptor {
           this.transferState.set(key, (<HttpResponse<any>>event).body);
         }));
       } else {
+        console.log("client request not found: "+request.url);
         return next.handle(request);
       }
     }

landingPages/result/resultLanding.component.html

@@ -1,5 +1,5 @@
 <!--        schema.org-->
-<schema2jsonld *ngIf="resultLandingInfo && resultLandingInfo.record"
+<schema2jsonld *ngIf="resultLandingInfo && resultLandingInfo.record && canonicalUrl"
                [data]=resultLandingInfo.record [URL]="canonicalUrl"
                [searchActionRoute]="properties.searchLinkToResults"></schema2jsonld>
 <div *ngIf="resultLandingInfo && !resultLandingInfo.belongsTo && !isBottomIntersecting" [innerHTML]="resultLandingInfo.message"
@@ -44,16 +44,22 @@
           </ng-template>
 
           <div #graph_and_feedback id="graph_and_feedback" class="uk-blur-background uk-text-xsmall uk-visible@m"
-              uk-sticky="end: true;" [attr.offset]="graph_offset">
+               [attr.uk-sticky]="isClient ? 'end: true;' : null" [attr.offset]="graph_offset">
+            <ng-container *ngIf="isClient">
               <ng-container *ngTemplateOutlet="graph_and_feedback_template"></ng-container>
+            </ng-container>
           </div>
 
           <div class="uk-container uk-container-xlarge">
 
             <div *ngIf="errorMessage.length > 0 || showLoading" class="uk-container uk-flex uk-flex-center uk-height-viewport uk-position-relative">
-              <div *ngIf="errorMessage.length > 0" class="uk-alert uk-alert-danger uk-width-2-3 uk-margin-xlarge-top"
+<!--              <div *ngIf="errorMessage.length > 0 && !showLoading" class="uk-alert uk-alert-danger uk-width-2-3 uk-margin-xlarge-top"-->
-                  role="alert">{{errorMessage}}</div>
+<!--                  role="alert">{{errorMessage}} &#45;&#45;&#45;&#45; {{showLoading}} &#45;&#45; {{isClient}} &#45;&#45; {{getDate()}}</div>-->
-              <div *ngIf="showLoading" class="uk-position-center">
+<!--              <div *ngIf="showLoading" class="uk-position-center">-->
+                <ng-template #errorAlert><div *ngIf="errorMessage.length > 0"  class="uk-alert uk-alert-danger uk-width-2-3 uk-margin-xlarge-top"
+                                              role="alert">{{errorMessage}}</div></ng-template>
+                <div *ngIf="showLoading; else errorAlert" class="uk-position-center">
+<!--                  {{isClient ? "client" : "server"}}-->
                   <loading></loading>
               </div>
             </div>
@@ -62,7 +68,7 @@
               <div class="uk-flex uk-flex-middle uk-flex-center">
                 <div class="landing-action-bar uk-box-shadow-small uk-margin-bottom">
                   <div class="uk-grid uk-grid-small uk-flex-between uk-text-xsmall uk-flex-middle uk-grid-divider" uk-grid>
-                    <div class="uk-width-auto">
+                    <div class="uk-width-auto uk-first-column">
                       <div class="uk-grid uk-grid-small uk-child-width-auto" uk-grid>
                         <availableOn *ngIf="resultLandingInfo?.hostedBy_collectedFrom?.length"
                                      [availableOn]="resultLandingInfo.hostedBy_collectedFrom" [prevPath]="prevPath"></availableOn>
@@ -131,7 +137,7 @@
                   </div>
                 </div>
 
-                <div id="main-tabs-div" class="uk-sticky uk-blur-background" uk-sticky="end: true; media: @m" [attr.offset]="offset">
+                <div id="main-tabs-div" class="uk-sticky uk-blur-background" [attr.uk-sticky]="isClient ? 'end: true; media: @m' : null" [attr.offset]="offset">
                   <div class="uk-padding uk-padding-remove-horizontal uk-padding-remove-bottom">
                     <landing-header [ngClass]="stickyHeader ? 'uk-visible@m' : 'uk-invisible'"
                                     [properties]="properties" [title]="resultLandingInfo.title"
@@ -204,7 +210,7 @@
                     </div>
                   </ng-container>
                 </div>
-                <div class="uk-text-xsmall uk-hidden@m"><ng-container *ngTemplateOutlet="graph_and_feedback_template"></ng-container></div>
+                <div class="uk-text-xsmall uk-hidden@m">oooo<ng-container *ngTemplateOutlet="graph_and_feedback_template"></ng-container></div>
                 <helper *ngIf="pageContents && pageContents['bottom'] && pageContents['bottom'].length > 0"
                         [texts]="pageContents['bottom']"></helper>
               </ng-container>
@@ -218,7 +224,7 @@
         <ng-container *ngIf="resultLandingInfo && hasRightSidebarInfo">
           <div id="landing-right-sidebar" *ngIf="!rightSidebarOffcanvasClicked" class="uk-width-1-3 uk-width-1-4@l uk-padding-remove uk-text-small uk-visible@m"
             [class.uk-animation-right]="viewAll">
-            <div class="uk-sticky" uk-sticky="end: true" [attr.offset]="offset">
+            <div class="uk-sticky" [attr.uk-sticky]="isClient ? 'end: true' : null" [attr.offset]="offset">
               <div class="uk-overflow-auto uk-height-1-1">
                 <ng-container *ngTemplateOutlet="right_column"></ng-container>
               </div>
@@ -305,7 +311,7 @@
              class="uk-margin-medium-top uk-padding uk-padding-remove-vertical">
           <div class="landing-oaroutes-card uk-text-small uk-flex uk-padding-small">
             <div>
-              <div class="uk-flex uk-flex-top" uk-grid>
+              <div class="uk-flex uk-flex-top uk-grid" uk-grid>
                 <div *ngIf="resultLandingInfo.oaRoutes.green" class="uk-flex-nowrap uk-flex uk-flex-middle uk-margin-xsmall-bottom uk-margin-remove-top">
                   <div class="dot green"></div>
                   <div class="uk-text-capitalize">Green</div>
@@ -416,7 +422,7 @@
           </div>
           <div class="uk-width-expand uk-flex">
             <div>
-              <div class="uk-flex uk-flex-top" uk-grid>
+              <div class="uk-flex uk-flex-top uk-grid" uk-grid>
                 <div *ngIf="resultLandingInfo.oaRoutes.green" class="uk-flex-nowrap uk-flex uk-flex-middle uk-margin-xsmall-bottom uk-margin-remove-top">
                   <div class="dot green"></div>
                   <div class="uk-text-capitalize">Green</div>
@@ -996,7 +1002,7 @@
 <ng-template #metricsContent>
   <div id="metrics" class="landing-section">
     <ul class="uk-subnav uk-subnav-pill-alt uk-margin-remove" uk-switcher>
-      <li class="uk-padding-remove">
+      <li class="uk-padding-remove uk-active">
         <a href="#">Overview</a>
       </li>
       <li *ngIf="resultLandingInfo.measure && resultLandingInfo.measure.bip.length">
@@ -1011,10 +1017,10 @@
     </ul>
     <ul class="uk-switcher uk-margin-large-top">
       <!-- overview -->
-      <li>
+      <li class="uk-active">
         <div class="uk-flex uk-flex-wrap landing-metrics-overview">
           <div *ngIf="resultLandingInfo.measure && resultLandingInfo.measure.bip.length">
-            <div class="uk-grid-divider" uk-grid>
+            <div class="uk-grid uk-grid-divider" uk-grid>
               <div>
                 <div class="uk-text-center uk-margin-small-bottom">
                   <a href='https://bip.imsi.athenarc.gr/' target='_blank'>
@@ -1053,7 +1059,7 @@
             <altmetrics id="{{resultLandingInfo.identifiers?.get('doi')[0]}}" type="doi" size="donut"></altmetrics>
           </div>
           <div *ngIf="resultLandingInfo.measure && resultLandingInfo.measure.counts.length">
-            <div class="uk-grid-divider" uk-grid>
+            <div class="uk-grid uk-grid-divider" uk-grid>
               <div>
                 <div class="uk-text-center uk-margin-small-bottom">
                   <a href='https://usagecounts.openaire.eu/' target='_blank'>
@@ -1188,10 +1194,13 @@
 </ng-template>
 
 <ng-template #dropInfo let-option=option let-isCompact=isCompact>
+  <ng-container *ngIf="isClient">
+<!--  <div *ngIf="isClient" class="default-dropdown uk-dropdown" uk-dropdown="pos: bottom-left; mode:click; container: #modal-container;">-->
   <div class="default-dropdown uk-dropdown" uk-dropdown="pos: bottom-left; mode:click; container: #modal-container;">
     <div class="uk-padding-small uk-width-medium uk-text-small" [innerHTML]="getMetricsTooltip(option, isCompact) | safeHtml">
     </div>
   </div>
+  </ng-container>
 </ng-template>
 
 <ng-container *ngIf="isMobile">

landingPages/result/resultLanding.component.ts

@@ -1,6 +1,10 @@
-import {ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, Output, ViewChild} from '@angular/core';
+import {
+  ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, Output, ViewChild,
+  Inject, PLATFORM_ID, makeStateKey, TransferState, StateKey
+} from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router';
 import {Meta, Title} from '@angular/platform-browser';
+import {isPlatformServer} from '@angular/common';
 
 import {EnvProperties} from '../../utils/properties/env-properties';
 import {Id, ResultLandingInfo} from '../../utils/entities/resultLandingInfo';
@@ -54,6 +58,9 @@ export class ResultLandingComponent {
   @ViewChild('AlertModalDeletedByInferenceFS') alertModalDeletedByInferenceFS;
   // @ViewChild('relationModal') relationModal;
   public deleteByInferenceOpened: boolean = false;
+  // private stateKey: StateKey<{"resultLandingInfo": any, "contexts": any}>;
+  private stateKey: StateKey<boolean>;
+  public resultFromState: boolean = false;
   @Input() public resultFromInput: boolean = false;
   @Input() public resultLandingInfo: ResultLandingInfo;
   public belongsInEOSC: boolean = false;
@@ -162,7 +169,7 @@ export class ResultLandingComponent {
 	public provenanceActionVocabulary = null;
 	public relationsVocabulary = null;
 
-  public offset: number;
+  public offset: number = 0;
   public stickyHeader: boolean = false;
   public graph_offset: number = 0;
   public graph_height: number = 0;
@@ -199,6 +206,9 @@ export class ResultLandingComponent {
 
   public rightSidebarOffcanvasClicked: boolean = false;
   public egiTransferModalOpen = false;
+
+  public isClient: boolean = false;
+
   constructor(private _resultLandingService: ResultLandingService,
               private _vocabulariesService: ISVocabulariesService,
               private _piwikService: PiwikService,
@@ -215,7 +225,12 @@ export class ResultLandingComponent {
               private indexInfoService: IndexInfoService,
               private userManagementService: UserManagementService,
               private layoutService: LayoutService,
-              private _contextService: ContextsService) {
+              private _contextService: ContextsService,
+              @Inject(PLATFORM_ID) private platform: any,
+              private transferState: TransferState) {
+    this.isClient = !isPlatformServer(this.platform);
+    console.log(this.id, this.isClient);
+
     if(route.snapshot.data && route.snapshot.data['type']) {
       this.type = route.snapshot.data['type'];
     }
@@ -271,6 +286,7 @@ export class ResultLandingComponent {
         }
         this.initMetaAndLinks(this.type);
       }
+
       if(data["egiTransfer"] && data["egiTransfer"] == 't'){
         this.mobileContent = 'actions';
         this.egiTransferModalOpen = true;
@@ -284,6 +300,11 @@ export class ResultLandingComponent {
       }
 
       this.metricsClicked = false;
+      // if(this.resultFromState) {
+      //   this.showLoading = false;
+      //   return;
+      // }
+      console.log("execution...");
       if(this.resultFromInput){
         this.id = this.resultLandingInfo.objIdentifier;
         this.type="publication";
@@ -309,6 +330,7 @@ export class ResultLandingComponent {
 
   ngAfterViewInit() {
     if (typeof document !== 'undefined') {
+      console.log("afterviewinit");
       // if(properties.adminToolsPortalType !== 'eosc') {
       if(document.getElementById("main-menu")) {
         this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--header-height'));
@@ -323,6 +345,7 @@ export class ResultLandingComponent {
 
   ngAfterContentChecked() {
     if(this.graph_and_feedback && typeof document !== 'undefined') {
+      console.log("aftercontentchecked", this.errorMessage, this.showLoading);
       this.graph_offset = this.calcGraphOffset(this.graph_and_feedback.nativeElement);
     }
   }
@@ -437,11 +460,18 @@ export class ResultLandingComponent {
     return array.filter(value => value.toLowerCase() !== type);
   }
 
+  public getDate() {
+    return new Date();
+  }
+
   private getVocabulariesAndResultLandingInfo() {
     this.errorMessage = '';
     this.showLoading = true;
+    this.cdr.markForCheck();
+    this.cdr.detectChanges();
+    console.log("452: ", this.errorMessage, this.showLoading, new Date());
 
-    if (typeof document !== 'undefined') {
+    // if (typeof document !== 'undefined') {
 			this.subscriptions.push(this._vocabulariesService.getProvenanceActionVocabulary(this.properties).subscribe(
 				data => {
 					this.provenanceActionVocabulary = data;
@@ -464,10 +494,10 @@ export class ResultLandingComponent {
 					this.handleError("Error getting relations vocabulary for " + this.type, error);
 				}
 			));
-    } 
+    // }
-		else {
+		// else {
-			this.getResultLandingInfo(null);
+		// 	this.getResultLandingInfo(null);
-		}
+		// }
   }
 
   private setActiveTab() {
@@ -517,7 +547,41 @@ export class ResultLandingComponent {
       this.showLoading = false;
       return;
     }
-    this.resultLandingInfo = null;
+
+
+    if(this.id || this.identifier) {
+      this.stateKey = makeStateKey<boolean>(this.id ? this.id : this.identifier.id);
+      if(this.isClient) {
+        this.resultFromState = this.transferState.get(this.stateKey, null);
+      }
+    }
+
+    // if(this.id || this.identifier) {
+    //   this.stateKey = makeStateKey<{"resultLandingInfo": any, "contexts": any}>(this.id ? this.id : this.identifier.id);
+    //   if(this.isClient) {
+    //     const storedResponse = this.transferState.get<{"resultLandingInfo": any, "contexts": any}>(this.stateKey, null);
+    //     if (storedResponse) {
+    //       console.log("storedResponse: ", storedResponse);
+    //       this.showLoading = false;
+    //       this.resultFromState = true;
+    //       console.log(storedResponse.resultLandingInfo.identifiers);
+    //       this.resultLandingInfo = this.deepCopyWithMap(storedResponse.resultLandingInfo);
+    //       console.log(this.transferState.get(this.stateKey, null).resultLandingInfo.identifiers);
+    //       console.log(this.resultLandingInfo.identifiers);
+    //       // console.log(this.resultLandingInfo);
+    //       this.afterResultLandingInfo(storedResponse.contexts);
+    //       // this.id = this.resultLandingInfo.objIdentifier;
+    //       this.transferState.remove(this.stateKey);
+    //
+    //       console.log(this.transferState.get(makeStateKey<any>("test1"), null));
+    //       console.log(this.deepCopyWithMap(this.transferState.get(makeStateKey<any>("test1"), null)));
+    //       this.transferState.remove(makeStateKey("test1"));
+    //       return;
+    //     }
+    //   }
+    // }
+
+    // this.resultLandingInfo = null;
     this.hasAltMetrics = false;
     this.subscriptions.push(this._resultLandingService.getResultLandingInfo(this.id, this.identifier, this.type, subjectsVocabulary, this.properties).subscribe(
       async data => {
@@ -525,10 +589,55 @@ export class ResultLandingComponent {
         data.contexts = [];
 
         this.resultLandingInfo = data;
-        this.id = this.resultLandingInfo.objIdentifier;
+        if(!this.isClient) {
+          this.transferState.set(this.stateKey, true);
+        }
+        // if(!this.isClient) {
+        //   console.log("set transferState resultLandingInfo: ", this.resultLandingInfo.identifiers);
+        //   this.transferState.set(this.stateKey, {"resultLandingInfo": this.deepCopyWithMap(this.resultLandingInfo), "contexts": contexts});
+        //   console.log(this.transferState.get(this.stateKey, null).resultLandingInfo.identifiers);
+        //   let tmp = this.deepCopyWithMap(this.resultLandingInfo);
+        //   console.log(tmp.identifiers);
+        //
+        //   let test1 = new Map<string, string>();
+        //   test1.set("1", "1");
+        //   test1.set("2", "2");
+        //   this.transferState.set(makeStateKey<any>("test1"), this.deepCopyWithMap(test1));
+        //   console.log(this.transferState.get(makeStateKey<any>("test1"), null));
+        // }
+
         let typeId = this.identifier?.id?'pid':'id';
-        let id = this.identifier?.id?this.identifier.id:this.id;
+        let id = this.identifier?.id?this.identifier.id:this.resultLandingInfo.objIdentifier;
+        // console.log("resultLandingInfo: ",this.resultLandingInfo);
         this.resultLandingInfo.setBelongsTo(typeId, id);
+        this.afterResultLandingInfo(contexts);
+      },
+      err => {
+        this.handleError("Error getting " + this.type + " for " + (this.id ? ("id: " + this.id) : ("pid: " + this.identifier.id)), err);
+        this.showLoading = false;
+        console.log("658: ", this.errorMessage, this.showLoading, new Date());
+
+        if (err.status == 404) {
+          this._router.navigate([this.properties.errorLink], {queryParams: {"page": this._location.path(true), "page_type": this.type}});
+        }else if(err.name == "TimeoutError"){
+          this.errorMessage = 'An error occurred please try again later';
+          console.log("655: ", this.errorMessage, this.showLoading, new Date());
+        }else{
+          this.errorMessage = "No " + this.getTypeName() + " found";
+          console.log("658: ", this.errorMessage, this.showLoading, new Date());
+          this.seoService.createLinkForCanonicalURL(this.properties.domain+ properties.baseLink  + this.linkToSearchPage);
+        }
+        // this.showLoading = false;
+        // this.cdr.detectChanges();
+        // console.log("662: ", this.errorMessage, this.showLoading, new Date());
+      }
+    ));
+  }
+
+  private async afterResultLandingInfo(contexts) {
+    console.log("afterResultLandingInfo");
+    this.id = this.resultLandingInfo.objIdentifier;
+
     //old
     // this.viewsFrameUrl = this.properties.framesAPIURL + 'merge.php?com=query&data=[{"query":"resRepoViews", "resTitle":"' + this.id + '", "table":"","fields":[{"fld":"sum","agg":"sum","type":"column","yaxis":1,"c":false}],"xaxis":{"name":"month","agg":"sum"},"group":" ","color":"","type":"chart","size":200,"sort":"xaxis","xStyle":{"r":-30,"s":"6","l":"-","ft":"-","wt":"-"},"title":"","subtitle":"","xaxistitle":"Repository","yaxisheaders":["Monthly views"],"generalxaxis":"","theme":0,"in":[],"filters":[{"name":"","values":[""],"to":"-1"}]}]&info_types=["column"]&stacking=normal&steps=false&fontFamily=Courier&spacing=[5,0,0,0]&style=[{"color":"rgba(0, 0, 0, 1)","size":"18"},{"color":"rgba(0, 0, 0, 1)","size":"18"},{"color":"000000","size":""},{"color":"000000","size":""}]&backgroundColor=rgba(255,255,255,1)&colors[]=rgba(67, 67, 72, 1)&colors[]=rgba(144, 237, 125, 1)&colors[]=rgba(247, 163, 92, 1)&colors[]=rgba(128, 133, 233, 1)&colors[]=rgba(241, 92, 128, 1)&colors[]=rgba(228, 211, 84, 1)&colors[]=rgba(43, 144, 143, 1)&colors[]=rgba(244, 91, 91, 1)&colors[]=rgba(145, 232, 225, 1)&xlinew=0&ylinew=1&legends=true&tooltips=true&persistent=false';
     // this.downloadsFrameUrl = this.properties.framesAPIURL + 'merge.php?com=query&data=[{"query":"resRepoDownloads", "resTitle":"' + this.id + '", "table":"","fields":[{"fld":"sum","agg":"sum","type":"column","yaxis":1,"c":false}],"xaxis":{"name":"month","agg":"sum"},"group":" ","color":"","type":"chart","size":200,"sort":"xaxis","xStyle":{"r":-30,"s":"6","l":"-","ft":"-","wt":"-"},"title":"","subtitle":"","xaxistitle":"Repository","yaxisheaders":["Monthly downloads"],"generalxaxis":"","theme":0,"in":[],"filters":[{"name":"","values":[""],"to":"-1"}]}]&info_types=["column"]&stacking=normal&steps=false&fontFamily=Courier&spacing=[5,0,0,0]&style=[{"color":"rgba(0, 0, 0, 1)","size":"18"},{"color":"rgba(0, 0, 0, 1)","size":"18"},{"color":"000000","size":""},{"color":"000000","size":""}]&backgroundColor=rgba(255,255,255,1)&colors[]=rgba(67, 67, 72, 1)&colors[]=rgba(144, 237, 125, 1)&colors[]=rgba(247, 163, 92, 1)&colors[]=rgba(128, 133, 233, 1)&colors[]=rgba(241, 92, 128, 1)&colors[]=rgba(228, 211, 84, 1)&colors[]=rgba(43, 144, 143, 1)&colors[]=rgba(244, 91, 91, 1)&colors[]=rgba(145, 232, 225, 1)&xlinew=0&ylinew=1&legends=true&tooltips=true&persistent=false';
@@ -537,12 +646,14 @@ export class ResultLandingComponent {
     this.downloadsFrameUrl = this.properties.statisticsFrameNewAPIURL + 'chart?json=' +
       encodeURIComponent('{"library":"HighCharts","chartDescription":{"queries":[{"name":"Monthly downloads","type":"column","query":{"name":"usagestats.results.downloads.monthly", "parameters":["' + this.id + '"], "profile":"OpenAIRE All-inclusive" }}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Monthly downloads"},"subtitle":{},"yAxis":{"title":{"text":""}},"xAxis":{"title":{}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":false},"plotOptions":{"series":{"dataLabels":{"enabled":false}}},"legend":{"enabled":false},"credits":{"href":null,"enabled":true,"text":""}}}');
     this.bipFrameUrl = this.properties.bipFrameAPIURL + this.id + (properties.environment == "beta" ? "&src=beta" : "");
+    console.log("bipFrameUrl: ", this.bipFrameUrl);
     let pid: Identifier = Identifier.getPIDFromIdentifiers(this.resultLandingInfo.identifiers);
     if (this.type == "result") { // no type was specified - update URL based this.resultLandingInfo.resultType
       this.updateUrlWithType(pid);
     }
     this.canonicalUrl = this.properties.domain + properties.baseLink + (pid ? (this.linkToLandingPage.split("?")[0] + "?pid=" + encodeURIComponent(pid.id)) :
       (this.linkToLandingPage + this.resultLandingInfo.relcanId));
+    console.log("canonical: ",this.canonicalUrl);
     this.seoService.createLinkForCanonicalURL(this.canonicalUrl);
     this.updateUrl(this.canonicalUrl);
     this.addNoIndexFilter();
@@ -635,20 +746,6 @@ export class ResultLandingComponent {
         this.cdr.detectChanges();
       }
     }
-      },
-      err => {
-        this.handleError("Error getting " + this.type + " for " + (this.id ? ("id: " + this.id) : ("pid: " + this.identifier.id)), err);
-        if (err.status == 404) {
-          this._router.navigate([this.properties.errorLink], {queryParams: {"page": this._location.path(true), "page_type": this.type}});
-        }else if(err.name == "TimeoutError"){
-          this.errorMessage = 'An error occurred please try again later';
-        }else{
-          this.errorMessage = "No " + this.getTypeName() + " found";
-          this.seoService.createLinkForCanonicalURL(this.properties.domain+ properties.baseLink  + this.linkToSearchPage);
-        }
-        this.showLoading = false;
-      }
-    ));
   }
 
   public getPublicCommunities() {
@@ -1252,4 +1349,25 @@ export class ResultLandingComponent {
       return "https://"+(this.properties.environment == "beta" ? "beta." : "")+"search.marketplace.eosc-portal.eu/";
     }
   }
+
+  // public get isClient() {
+  //   return (typeof document !== undefined);
+  // }
+
+  private deepCopyWithMap(obj: any): any {
+    return JSON.parse(JSON.stringify(obj, (key, value) => {
+      if (value instanceof Map) {
+        return {
+          __isMap: true,
+          value: Array.from(value.entries())
+        };
+      }
+      return value;
+    }), (key, value) => {
+      if (value && value.__isMap) {
+        return new Map(value.value);
+      }
+      return value;
+    });
+  }
 }

sharedComponents/numbers/numbers.component.ts

@@ -1,4 +1,14 @@
-import {Component, EventEmitter, Input, OnDestroy, OnInit, Output} from '@angular/core';
+import {
+  Component,
+  EventEmitter,
+  Inject,
+  Input, makeStateKey,
+  OnDestroy,
+  OnInit,
+  Output,
+  PLATFORM_ID,
+  TransferState
+} from '@angular/core';
 import {SearchResearchResultsService} from '../../services/searchResearchResults.service';
 import {SearchDataprovidersService} from '../../services/searchDataproviders.service';
 import {RefineFieldResultsService} from '../../services/refineFieldResults.service';
@@ -10,6 +20,7 @@ import {RouterHelper} from "../../utils/routerHelper.class";
 import {OpenaireEntities} from "../../utils/properties/searchFields";
 import {SearchOrganizationsService} from '../../services/searchOrganizations.service';
 import {GroupedRequestsService} from "../../services/groupedRequests.service";
+import {isPlatformServer} from "@angular/common";
 
 export interface Numbers {
   publicationsSize?: NumberSize;
@@ -28,6 +39,7 @@ export interface Numbers {
 @Component({
   selector: 'numbers',
   template: `
+    {{isClient? "Client" : "Server"}}
 		<div *ngIf="showContentWithNumbers" class="uk-margin-top" style="max-width: 600px;" uk-scrollspy-class>
 			<div>
 				A comprehensive and open dataset of research information covering 
@@ -72,11 +84,16 @@ export class NumbersComponent implements OnInit, OnDestroy {
   private emptySubject: BehaviorSubject<number> = new BehaviorSubject<number>(0);
   private subs: any[] = [];
 
+  public isClient: boolean = false;
+
   constructor(private searchResearchResultsService: SearchResearchResultsService,
               private searchDataprovidersService: SearchDataprovidersService,
               private refineFieldResultsService: RefineFieldResultsService,
 							private _searchOrganizationsService: SearchOrganizationsService,
-              private groupedRequestsService: GroupedRequestsService) {
+              private groupedRequestsService: GroupedRequestsService,
+              @Inject(PLATFORM_ID) private platform: any,
+              private transferState: TransferState) {
+    this.isClient = !isPlatformServer(this.platform);
     this.emptySubject = new BehaviorSubject<number>(0);
   }
   
@@ -88,6 +105,14 @@ export class NumbersComponent implements OnInit, OnDestroy {
   
   init(getDatasetsLinked = false, getSoftwareLinked = false, getPublications = true, getDatasets = true,
       getSoftware = true, getOther = true, getProjects = true, getDataProviders = true, getOrganizations = true, refineValue: string = null) {
+    let stateKey = makeStateKey<Numbers>("numbers");
+    console.log("isClient: "+this.isClient + " - numbers in transferstate: "+this.transferState.hasKey(stateKey));
+    if(this.isClient && this.transferState.hasKey(stateKey)) {
+      this.numbers = this.transferState.get(stateKey, null);
+      console.log("numbers ready");
+      this.results.emit(this.numbers);
+      return;
+    } else {
       if (refineValue) {
         this.refineValue = refineValue;
       }
@@ -156,6 +181,11 @@ export class NumbersComponent implements OnInit, OnDestroy {
             }
 
             this.numbers.mergedFundersSize = NumberUtils.roundNumber(mergedFundersSet.size);
+            if (!this.isClient) {
+              this.transferState.set(stateKey, this.numbers);
+              console.log("set numbers in transferState");
+            }
+            console.log("numbers returned");
           }
         ), err => {
           this.handleError('Error getting numbers', err);
@@ -195,11 +225,16 @@ export class NumbersComponent implements OnInit, OnDestroy {
             }
           }
           this.results.emit(this.numbers);
+          if (!this.isClient) {
+            this.transferState.set(stateKey, this.numbers);
+          }
+          console.log("numbers returned 2");
         }, err => {
           this.handleError('Error getting numbers', err);
         }));
       }
     }
+  }
   
   ngOnDestroy() {
     this.subs.forEach(sub => {

sharedComponents/search-input/search-input.component.ts

@@ -86,6 +86,7 @@ export class SearchInputComponent implements OnInit, AfterViewInit {
   ngOnInit() {
     this.expanded = !this.expandable;
     this.initialized = true;
+    // this.cdr.detectChanges();
   }
   
   ngAfterViewInit() {

utils/properties/environments/environment.ts

@@ -110,7 +110,7 @@ export let commonDev: EnvProperties = {
   orcidAPIURL: "http://duffy.di.uoa.gr:19480/uoa-orcid-service/",
   orcidTokenURL: "https://sandbox.orcid.org/oauth/authorize?",
   orcidClientId: "APP-A5M3KTX6NCN67L91",
-  utilsService: "http://scoobydoo.di.uoa.gr:8000",
+  utilsService: "http://duffy.di.uoa.gr:8000",
   vocabulariesAPI: "https://dev-openaire.d4science.org/provision/mvc/vocabularies/",
   loginServiceURL: "http://mpagasas.di.uoa.gr:19080/login-service/",
   cookieDomain: ".di.uoa.gr",