fix(material/sidenav): enable hydration

Fixes that the sidenav was disabling hydration. This is problematic, because it essentially disables hydration for the entire app that is using the sidenav. The hydration errors had a couple of root causes:
1. Focus trap anchors throw off hydration.
2. We were moving the end sidenav manually so the visual order matches the DOM order for accessibility. Now this happens only on the client.

Fixes #27848.

Author: crisbeto

src/material/sidenav/drawer.ts

@@ -101,7 +101,6 @@ export function MAT_DRAWER_DEFAULT_AUTOSIZE_FACTORY(): boolean {
     'class': 'mat-drawer-content',
     '[style.margin-left.px]': '_container._contentMargins.left',
     '[style.margin-right.px]': '_container._contentMargins.right',
-    'ngSkipHydration': '',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
@@ -151,13 +150,12 @@ export class MatDrawerContent extends CdkScrollable implements AfterContentInit
     '[@transform]': '_animationState',
     '(@transform.start)': '_animationStarted.next($event)',
     '(@transform.done)': '_animationEnd.next($event)',
-    'ngSkipHydration': '',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
 })
 export class MatDrawer implements AfterViewInit, AfterContentChecked, OnDestroy {
-  private _focusTrap: FocusTrap;
+  private _focusTrap: FocusTrap | null = null;
   private _elementFocusedBeforeDrawerWasOpened: HTMLElement | null = null;
 
   /** Whether the drawer is initialized. Used for disabling the initial animation. */
@@ -477,14 +475,19 @@ export class MatDrawer implements AfterViewInit, AfterContentChecked, OnDestroy
 
   ngAfterViewInit() {
     this._isAttached = true;
-    this._focusTrap = this._focusTrapFactory.create(this._elementRef.nativeElement);
-    this._updateFocusTrapState();
 
     // Only update the DOM position when the sidenav is positioned at
     // the end since we project the sidenav before the content by default.
     if (this._position === 'end') {
       this._updatePositionInParent('end');
     }
+
+    // Needs to happen after the position is updated
+    // so the focus trap anchors are in the right place.
+    if (this._platform.isBrowser) {
+      this._focusTrap = this._focusTrapFactory.create(this._elementRef.nativeElement);
+      this._updateFocusTrapState();
+    }
   }
 
   ngAfterContentChecked() {
@@ -498,10 +501,7 @@ export class MatDrawer implements AfterViewInit, AfterContentChecked, OnDestroy
   }
 
   ngOnDestroy() {
-    if (this._focusTrap) {
-      this._focusTrap.destroy();
-    }
-
+    this._focusTrap?.destroy();
     this._anchor?.remove();
     this._anchor = null;
     this._animationStarted.complete();
@@ -607,7 +607,12 @@ export class MatDrawer implements AfterViewInit, AfterContentChecked, OnDestroy
    * matches the tab order. We also need to be able to move it back to `start` if the sidenav
    * started off as `end` and was changed to `start`.
    */
-  private _updatePositionInParent(newPosition: 'start' | 'end') {
+  private _updatePositionInParent(newPosition: 'start' | 'end'): void {
+    // Don't move the DOM node around on the server, because it can throw off hydration.
+    if (!this._platform.isBrowser) {
+      return;
+    }
+
     const element = this._elementRef.nativeElement;
     const parent = element.parentNode!;
 
@@ -638,7 +643,6 @@ export class MatDrawer implements AfterViewInit, AfterContentChecked, OnDestroy
   host: {
     'class': 'mat-drawer-container',
     '[class.mat-drawer-container-explicit-backdrop]': '_backdropOverride',
-    'ngSkipHydration': '',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,

src/material/sidenav/sidenav.ts

@@ -37,7 +37,6 @@ import {ScrollDispatcher, CdkScrollable} from '@angular/cdk/scrolling';
     'class': 'mat-drawer-content mat-sidenav-content',
     '[style.margin-left.px]': '_container._contentMargins.left',
     '[style.margin-right.px]': '_container._contentMargins.right',
-    'ngSkipHydration': '',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
@@ -78,7 +77,6 @@ export class MatSidenavContent extends MatDrawerContent {
     '[class.mat-sidenav-fixed]': 'fixedInViewport',
     '[style.top.px]': 'fixedInViewport ? fixedTopGap : null',
     '[style.bottom.px]': 'fixedInViewport ? fixedBottomGap : null',
-    'ngSkipHydration': '',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
@@ -129,7 +127,6 @@ export class MatSidenav extends MatDrawer {
   host: {
     'class': 'mat-drawer-container mat-sidenav-container',
     '[class.mat-drawer-container-explicit-backdrop]': '_backdropOverride',
-    'ngSkipHydration': '',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,

src/universal-app/kitchen-sink/kitchen-sink.html

@@ -257,18 +257,23 @@ <h2>Select</h2>
 <h2>Sidenav</h2>
 <mat-sidenav-container>
   <!--
-    TODO: add sample with multiple sidenavs which can be problematic for hydration.
-    Currently blocked on https://github.com/angular/angular/issues/53246
+    Place the end sidenav first to test the behavior where we manually change the DOM order.
   -->
+  <mat-sidenav #endSidenav position="end" mode="push">
+    End sidenav
+    <button (click)="endSidenav.toggle()">Close</button>
+  </mat-sidenav>
+
   <!--
     Only attempt to capture focus when automated, otherwise it makes the page jump around.
    -->
-  <mat-sidenav #sidenav opened [autoFocus]="isAutomated ? 'first-tabbable' : false">
-    On the side
-    <button (click)="sidenav.toggle()">Button for testing focus trapping</button>
+  <mat-sidenav #startSidenav opened [autoFocus]="isAutomated ? 'first-tabbable' : false">
+    Start sidenav
+    <button (click)="startSidenav.toggle()">Button for testing focus trapping</button>
   </mat-sidenav>
   Main content
-  <button (click)="sidenav.toggle()">Click me</button>
+  <button (click)="startSidenav.toggle()">Toggle start</button>
+  <button (click)="endSidenav.toggle()">Toggle end</button>
 </mat-sidenav-container>
 
 <h2>Slide-toggle</h2>