fix: delay on-load sanity checks

Delays the sanity checks from the `CompatibilityModule` by 5 seconds, in order to give the user's base styles a better chance to load.

Fixes #4125.

Author: crisbeto

src/lib/core/compatibility/compatibility.ts

@@ -7,6 +7,7 @@ import {
   Optional,
   isDevMode,
   ElementRef,
+  NgZone,
 } from '@angular/core';
 import {DOCUMENT} from '@angular/platform-browser';
 import {MdError} from '../errors/error';
@@ -193,16 +194,21 @@ export class CompatibilityModule {
     };
   }
 
-  constructor(@Optional() @Inject(DOCUMENT) private _document: any) {
-    if (!hasDoneGlobalChecks && isDevMode()) {
-      this._checkDoctype();
-      this._checkTheme();
-      hasDoneGlobalChecks = true;
+  constructor(@Optional() @Inject(DOCUMENT) private _document: any, ngZone: NgZone) {
+    if (!hasDoneGlobalChecks && _document && isDevMode()) {
+      ngZone.runOutsideAngular(() => {
+        // Delay running the check to allow more time for the user's styles to load.
+        setTimeout(() => {
+          this._checkDoctype();
+          this._checkTheme();
+          hasDoneGlobalChecks = true;
+        }, 5000);
+      });
     }
   }
 
   private _checkDoctype(): void {
-    if (this._document && !this._document.doctype) {
+    if (!this._document.doctype) {
       console.warn(
         'Current document does not have a doctype. This may cause ' +
         'some Angular Material components not to behave as expected.'
@@ -211,7 +217,7 @@ export class CompatibilityModule {
   }
 
   private _checkTheme(): void {
-    if (this._document && typeof getComputedStyle === 'function') {
+    if (typeof getComputedStyle === 'function') {
       const testElement = this._document.createElement('div');
 
       testElement.classList.add('mat-theme-loaded-marker');