From b2a160635f4ea5137a17b464b2203ca178ba0ca6 Mon Sep 17 00:00:00 2001 From: crisbeto Date: Thu, 20 Apr 2017 18:58:27 +0200 Subject: [PATCH] fix: allow users to disable the sanity checks Allows users to disable the Material sanity checks, by providing a value for the `MATERIAL_SANITY_CHECKS` token: ```ts @NgModule({ providers: [ {provide: MATERIAL_SANITY_CHECKS, useValue: false} ] // other config }); ``` Fixes #4125. --- src/lib/core/compatibility/compatibility.ts | 27 +++++++++++++++------ 1 file changed, 19 insertions(+), 8 deletions(-) diff --git a/src/lib/core/compatibility/compatibility.ts b/src/lib/core/compatibility/compatibility.ts index c790a0691992..8ee0f51e50c8 100644 --- a/src/lib/core/compatibility/compatibility.ts +++ b/src/lib/core/compatibility/compatibility.ts @@ -7,15 +7,16 @@ import { Optional, isDevMode, ElementRef, + InjectionToken, } from '@angular/core'; import {DOCUMENT} from '@angular/platform-browser'; import {MdError} from '../errors/error'; -/** Whether we've done the global sanity checks (e.g. a theme is loaded, there is a doctype). */ -let hasDoneGlobalChecks = false; - export const MATERIAL_COMPATIBILITY_MODE = new OpaqueToken('md-compatibility-mode'); +/** Injection token that configures whether the Material sanity checks are enabled. */ +export const MATERIAL_SANITY_CHECKS = new InjectionToken('md-sanity-checks'); + /** * Exception thrown if the consumer has used an invalid Material prefix on a component. * @docs-private @@ -184,8 +185,14 @@ export class MdPrefixRejector { @NgModule({ declarations: [MatPrefixRejector, MdPrefixRejector], exports: [MatPrefixRejector, MdPrefixRejector], + providers: [{ + provide: MATERIAL_SANITY_CHECKS, useValue: true, + }], }) export class CompatibilityModule { + /** Whether we've done the global sanity checks (e.g. a theme is loaded, there is a doctype). */ + private _hasDoneGlobalChecks = false; + static forRoot(): ModuleWithProviders { return { ngModule: CompatibilityModule, @@ -193,16 +200,20 @@ export class CompatibilityModule { }; } - constructor(@Optional() @Inject(DOCUMENT) private _document: any) { - if (!hasDoneGlobalChecks && isDevMode()) { + constructor( + @Optional() @Inject(DOCUMENT) private _document: any, + @Optional() @Inject(MATERIAL_SANITY_CHECKS) _sanityChecksEnabled: boolean) { + + if (_sanityChecksEnabled && !this._hasDoneGlobalChecks && _document && isDevMode()) { + // Delay running the check to allow more time for the user's styles to load. this._checkDoctype(); this._checkTheme(); - hasDoneGlobalChecks = true; + this._hasDoneGlobalChecks = true; } } 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 +222,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');