Merge pull request #3740 from IgniteUI/simeonoff/fix-calendar-samples-vnext

fix(calendar): samples do not work in SSR mode

Author: ChronosSF

src/app/app.config.server.ts

@@ -1,10 +1,16 @@
-import { provideServerRendering, withRoutes } from '@angular/ssr';
-import { mergeApplicationConfig, ApplicationConfig } from '@angular/core';
-import { AppConfig } from './app.config';
-import { serverRoutes } from './app.routes.server';
+import { provideServerRendering, withRoutes } from "@angular/ssr";
+import { mergeApplicationConfig, ApplicationConfig } from "@angular/core";
+import { AppConfig } from "./app.config";
+import { serverRoutes } from "./app.routes.server";
+import { provideClientHydration } from "@angular/platform-browser";
+import { provideHttpClient, withFetch } from "@angular/common/http";
 
 const serverConfig: ApplicationConfig = {
-  providers: [provideServerRendering(withRoutes(serverRoutes))]
+    providers: [
+        provideServerRendering(withRoutes(serverRoutes)),
+        provideClientHydration(),
+        provideHttpClient(withFetch())
+    ]
 };
 
 export const config = mergeApplicationConfig(AppConfig, serverConfig);

src/app/app.routes.server.ts

@@ -59,11 +59,11 @@ export const serverRoutes: ServerRoute[] = [
     },
     {
         path: 'scheduling/**',
-        renderMode: RenderMode.Prerender
+        renderMode: RenderMode.Client // TODO: Calendar components have SSR hydration issues
     },
     {
         path: 'samples/scheduling/**',
-        renderMode: RenderMode.Prerender
+        renderMode: RenderMode.Client // TODO: Calendar components have SSR hydration issues
     },
     {
         path: 'menus/**',

src/app/index/index.component.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild, DOCUMENT, inject } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild, DOCUMENT, PLATFORM_ID, inject } from '@angular/core';
 import { NavigationStart, Route, Router, RouterLinkActive, RouterLink, RouterOutlet } from '@angular/router';
 import { IgxNavigationDrawerComponent, IgxTreeComponent, IgxLayoutDirective, IgxNavDrawerTemplateDirective, IgxNavDrawerItemDirective, IgxRippleDirective, IgxIconComponent, IgxInputGroupComponent, IgxPrefixDirective, IgxInputDirective, IgxSuffixDirective, IgxTreeNodeComponent, IgxTreeNodeLinkDirective, IgxFlexDirective, IgxNavbarComponent } from 'igniteui-angular';
 import { fromEvent, Subscription } from 'rxjs';
@@ -19,6 +19,7 @@ import { servicesRoutesData } from '../services/services-routes-data';
 import { themingRoutesData } from '../theming/theming-routes-data';
 import { treeGridRoutesData } from '../tree-grid/tree-grid-routes-data';
 import { FormsModule } from '@angular/forms';
+import { isPlatformBrowser } from '@angular/common';
 
 
 
@@ -32,6 +33,7 @@ export class IndexComponent implements OnInit, AfterViewInit {
     private router = inject(Router);
     private cdr = inject(ChangeDetectorRef);
     private document = inject<Document>(DOCUMENT);
+    private platformId = inject(PLATFORM_ID);
 
 
     @ViewChild('navdrawer', { read: IgxNavigationDrawerComponent, static: true })
@@ -168,7 +170,7 @@ export class IndexComponent implements OnInit, AfterViewInit {
         const loadedRouteItem = this.appRoutes.filter(
             (route: any) => route.path === this.router.url)[0];
 
-        if (loadedRouteItem) {
+        if (loadedRouteItem && isPlatformBrowser((this.platformId))) {
             // Get parent (INavItem)
             const loadedParentItem = this.currentNavItems.filter(
                 (navItem) => navItem.name === loadedRouteItem.parentName)[0];