[SSR]: Calendar component SSR Issues

[simeonoff]

Description

The calendar component has some rendering issues in SSR mode.

Primary SSR Issues in IgniteUI Angular Calendar Components:

1. Direct DOM Access Without SSR Guards

• Location: calendar.component.ts:442, 844, 1000
• Issue: Direct access to wrapper.nativeElement.focus() without
  checking if running in browser
• Impact: Causes nativeElement to be undefined during server-side
  rendering

2. ViewChild Dependencies in ngAfterViewInit

• Location: calendar.component.ts:87-88, 195-232, 240-250
• Issue: Multiple @ViewChild decorators accessing DOM elements in
  ngAfterViewInit without platform checks
• ViewChildren affected:
  • wrapper: ElementRef
  • monthsBtns: QueryList
  • prevPageBtn: ElementRef
  • nextPageBtn: ElementRef
  • Various view components (dacadeView, monthsView, daysView)

3. Keyboard Navigation Service SSR Issues

• Location: calendar.services.ts:14-32
• Issue: attachKeyboardHandlers() method accesses
  elementRef.nativeElement directly without browser checks
• Impact: Attempts to attach event listeners during SSR, causing
  hydration mismatches

4. Event Management Dependencies

• Location: calendar.services.ts:18-28
• Issue: Uses Angular's EventManager to attach DOM events during
  SSR
• Impact: Server tries to register keyboard event handlers that
  don't exist

5. Platform Dependencies Not Injected

• Issue: Components don't inject PLATFORM_ID token to check if
  running in browser
• Impact: No way to guard against server-side DOM access

Root Cause Analysis:

The calendar components were designed primarily for client-side
rendering and lack proper SSR compatibility patterns:

1. Missing Platform Detection: No isPlatformBrowser() checks before
   DOM operations
2. Aggressive DOM Access: Direct nativeElement access in lifecycle
   hooks
3. Event Handler Registration: Keyboard navigation setup runs
   during SSR
4. ViewChild Dependencies: Heavy reliance on DOM element references
   in ngAfterViewInit

Why Client-Side Rendering Fixes the Issue:

By setting renderMode: RenderMode.Client for calendar routes, we:

• Skip server-side rendering entirely for calendar components
• Prevent hydration mismatches between server/client DOM states
• Allow components to run only in browser environment where DOM
  APIs exist
• Eliminate SSR-related errors while maintaining full functionality

This is the most pragmatic solution until IgniteUI Angular
implements proper SSR guards in their calendar components.

• igniteui-angular version: all
• browser: all

Expected result

What is the expected result after following the steps to reproduce?
The calendar component should fully work in SSR.

Attachments

Attach a sample if available, and screenshots, if applicable.