@@ -7,15 +7,16 @@ import {
7
7
Optional ,
8
8
isDevMode ,
9
9
ElementRef ,
10
+ InjectionToken ,
10
11
} from '@angular/core' ;
11
12
import { DOCUMENT } from '@angular/platform-browser' ;
12
13
import { MdError } from '../errors/error' ;
13
14
14
- /** Whether we've done the global sanity checks (e.g. a theme is loaded, there is a doctype). */
15
- let hasDoneGlobalChecks = false ;
16
-
17
15
export const MATERIAL_COMPATIBILITY_MODE = new OpaqueToken ( 'md-compatibility-mode' ) ;
18
16
17
+ /** Injection token that configures whether the Material sanity checks are enabled. */
18
+ export const MATERIAL_SANITY_CHECKS = new InjectionToken < boolean > ( 'md-sanity-checks' ) ;
19
+
19
20
/**
20
21
* Exception thrown if the consumer has used an invalid Material prefix on a component.
21
22
* @docs -private
@@ -188,25 +189,35 @@ export class MdPrefixRejector {
188
189
@NgModule ( {
189
190
declarations : [ MatPrefixRejector , MdPrefixRejector ] ,
190
191
exports : [ MatPrefixRejector , MdPrefixRejector ] ,
192
+ providers : [ {
193
+ provide : MATERIAL_SANITY_CHECKS , useValue : true ,
194
+ } ] ,
191
195
} )
192
196
export class CompatibilityModule {
197
+ /** Whether we've done the global sanity checks (e.g. a theme is loaded, there is a doctype). */
198
+ private _hasDoneGlobalChecks = false ;
199
+
193
200
static forRoot ( ) : ModuleWithProviders {
194
201
return {
195
202
ngModule : CompatibilityModule ,
196
203
providers : [ ] ,
197
204
} ;
198
205
}
199
206
200
- constructor ( @Optional ( ) @Inject ( DOCUMENT ) private _document : any ) {
201
- if ( ! hasDoneGlobalChecks && isDevMode ( ) ) {
207
+ constructor (
208
+ @Optional ( ) @Inject ( DOCUMENT ) private _document : any ,
209
+ @Optional ( ) @Inject ( MATERIAL_SANITY_CHECKS ) _sanityChecksEnabled : boolean ) {
210
+
211
+ if ( _sanityChecksEnabled && ! this . _hasDoneGlobalChecks && _document && isDevMode ( ) ) {
212
+ // Delay running the check to allow more time for the user's styles to load.
202
213
this . _checkDoctype ( ) ;
203
214
this . _checkTheme ( ) ;
204
- hasDoneGlobalChecks = true ;
215
+ this . _hasDoneGlobalChecks = true ;
205
216
}
206
217
}
207
218
208
219
private _checkDoctype ( ) : void {
209
- if ( this . _document && ! this . _document . doctype ) {
220
+ if ( ! this . _document . doctype ) {
210
221
console . warn (
211
222
'Current document does not have a doctype. This may cause ' +
212
223
'some Angular Material components not to behave as expected.'
@@ -215,7 +226,7 @@ export class CompatibilityModule {
215
226
}
216
227
217
228
private _checkTheme ( ) : void {
218
- if ( this . _document && typeof getComputedStyle === 'function' ) {
229
+ if ( typeof getComputedStyle === 'function' ) {
219
230
const testElement = this . _document . createElement ( 'div' ) ;
220
231
221
232
testElement . classList . add ( 'mat-theme-loaded-marker' ) ;
0 commit comments