From d15431ba84daab3181d7d553e961aaa2104845e5 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Fri, 21 Sep 2018 19:16:38 +0200 Subject: [PATCH] fix(common): account for async hammer loader when checking whether hammer is defined (#12933) Since HammerJS can now be loaded asynchronously, we have to account for it in our sanity checks. --- .../core/common-behaviors/common-module.ts | 50 +++++++++++-------- 1 file changed, 28 insertions(+), 22 deletions(-) diff --git a/src/lib/core/common-behaviors/common-module.ts b/src/lib/core/common-behaviors/common-module.ts index 41bddec0f79..42081f87c05 100644 --- a/src/lib/core/common-behaviors/common-module.ts +++ b/src/lib/core/common-behaviors/common-module.ts @@ -7,6 +7,7 @@ */ import {NgModule, InjectionToken, Optional, Inject, isDevMode} from '@angular/core'; +import {HammerLoader, HAMMER_LOADER} from '@angular/platform-browser'; import {BidiModule} from '@angular/cdk/bidi'; @@ -44,7 +45,10 @@ export class MatCommonModule { /** Reference to the global 'window' object. */ private _window = typeof window === 'object' && window ? window : null; - constructor(@Optional() @Inject(MATERIAL_SANITY_CHECKS) private _sanityChecksEnabled: boolean) { + constructor( + @Optional() @Inject(MATERIAL_SANITY_CHECKS) private _sanityChecksEnabled: boolean, + @Optional() @Inject(HAMMER_LOADER) private _hammerLoader?: HammerLoader) { + if (this._areChecksEnabled() && !this._hasDoneGlobalChecks) { this._checkDoctypeIsDefined(); this._checkThemeIsPresent(); @@ -74,27 +78,29 @@ export class MatCommonModule { private _checkThemeIsPresent(): void { // We need to assert that the `body` is defined, because these checks run very early // and the `body` won't be defined if the consumer put their scripts in the `head`. - if (this._document && this._document.body && typeof getComputedStyle === 'function') { - const testElement = this._document.createElement('div'); - - testElement.classList.add('mat-theme-loaded-marker'); - this._document.body.appendChild(testElement); - - const computedStyle = getComputedStyle(testElement); - - // In some situations the computed style of the test element can be null. For example in - // Firefox, the computed style is null if an application is running inside of a hidden iframe. - // See: https://bugzilla.mozilla.org/show_bug.cgi?id=548397 - if (computedStyle && computedStyle.display !== 'none') { - console.warn( - 'Could not find Angular Material core theme. Most Material ' + - 'components may not work as expected. For more info refer ' + - 'to the theming guide: https://material.angular.io/guide/theming' - ); - } - - this._document.body.removeChild(testElement); + if (!this._document || !this._document.body || typeof getComputedStyle !== 'function') { + return; } + + const testElement = this._document.createElement('div'); + + testElement.classList.add('mat-theme-loaded-marker'); + this._document.body.appendChild(testElement); + + const computedStyle = getComputedStyle(testElement); + + // In some situations the computed style of the test element can be null. For example in + // Firefox, the computed style is null if an application is running inside of a hidden iframe. + // See: https://bugzilla.mozilla.org/show_bug.cgi?id=548397 + if (computedStyle && computedStyle.display !== 'none') { + console.warn( + 'Could not find Angular Material core theme. Most Material ' + + 'components may not work as expected. For more info refer ' + + 'to the theming guide: https://material.angular.io/guide/theming' + ); + } + + this._document.body.removeChild(testElement); } /** Checks whether HammerJS is available. */ @@ -103,7 +109,7 @@ export class MatCommonModule { return; } - if (this._areChecksEnabled() && !this._window['Hammer']) { + if (this._areChecksEnabled() && !this._window['Hammer'] && !this._hammerLoader) { console.warn( 'Could not find HammerJS. Certain Angular Material components may not work correctly.'); }