fix(badge): AoT and server-side rendering errors (#9935)

* Adds the badge component to the kitchen sink checks.
* Fixes an AoT error due to a reference to a private property in the `host` binding.
* Fixes a server-side rendering error due to a usage of `requestAnimationFrame`.

Author: crisbeto

src/lib/badge/badge.ts

@@ -22,7 +22,7 @@ export type MatBadgeSize = 'small' | 'medium' | 'large';
   selector: '[matBadge]',
   host: {
     'class': 'mat-badge',
-    '[class.mat-badge-overlap]': '_overlap',
+    '[class.mat-badge-overlap]': 'overlap',
     '[class.mat-badge-above]': 'isAbove()',
     '[class.mat-badge-below]': '!isAbove()',
     '[class.mat-badge-before]': '!isAfter()',
@@ -123,6 +123,8 @@ export class MatBadge {
   /** Creates the badge element */
   private _createBadgeElement(): HTMLElement {
     const badgeElement = this._document.createElement('span');
+    const activeClass = 'mat-badge-active';
+
     badgeElement.setAttribute('id', `mat-badge-content-${this._id}`);
     badgeElement.classList.add('mat-badge-content');
     badgeElement.textContent = this.content;
@@ -134,12 +136,15 @@ export class MatBadge {
     this._elementRef.nativeElement.appendChild(badgeElement);
 
     // animate in after insertion
-    this._ngZone.runOutsideAngular(() => requestAnimationFrame(() => {
-      // ensure content available
-      if (badgeElement) {
-        badgeElement.classList.add('mat-badge-active');
-      }
-    }));
+    if (typeof requestAnimationFrame === 'function') {
+      this._ngZone.runOutsideAngular(() => {
+        requestAnimationFrame(() => {
+          badgeElement.classList.add(activeClass);
+        });
+      });
+    } else {
+      badgeElement.classList.add(activeClass);
+    }
 
     return badgeElement;
   }

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

@@ -326,3 +326,9 @@ <h2>Focus trap</h2>
 <div cdkTrapFocus cdkTrapFocusAutoCapture>
   <button>Oh no, I'm trapped!</button>
 </div>
+
+<h2>Badge</h2>
+
+<button mat-raised-button matBadge="Clicked 1337 times">
+  Clicky thing
+</button>

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

@@ -3,6 +3,7 @@ import {ServerModule} from '@angular/platform-server';
 import {BrowserModule} from '@angular/platform-browser';
 import {
   MatAutocompleteModule,
+  MatBadgeModule,
   MatButtonModule,
   MatButtonToggleModule,
   MatCardModule,
@@ -93,6 +94,7 @@ export class KitchenSink {
   imports: [
     BrowserModule.withServerTransition({appId: 'kitchen-sink'}),
     MatAutocompleteModule,
+    MatBadgeModule,
     MatButtonModule,
     MatButtonToggleModule,
     MatCardModule,