@@ -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
@@ -184,25 +185,35 @@ export class MdPrefixRejector {
184
185
@NgModule ( {
185
186
declarations : [ MatPrefixRejector , MdPrefixRejector ] ,
186
187
exports : [ MatPrefixRejector , MdPrefixRejector ] ,
188
+ providers : [ {
189
+ provide : MATERIAL_SANITY_CHECKS , useValue : true ,
190
+ } ] ,
187
191
} )
188
192
export class CompatibilityModule {
193
+ /** Whether we've done the global sanity checks (e.g. a theme is loaded, there is a doctype). */
194
+ private _hasDoneGlobalChecks = false ;
195
+
189
196
static forRoot ( ) : ModuleWithProviders {
190
197
return {
191
198
ngModule : CompatibilityModule ,
192
199
providers : [ ] ,
193
200
} ;
194
201
}
195
202
196
- constructor ( @Optional ( ) @Inject ( DOCUMENT ) private _document : any ) {
197
- if ( ! hasDoneGlobalChecks && isDevMode ( ) ) {
203
+ constructor (
204
+ @Optional ( ) @Inject ( DOCUMENT ) private _document : any ,
205
+ @Optional ( ) @Inject ( MATERIAL_SANITY_CHECKS ) _sanityChecksEnabled : boolean ) {
206
+
207
+ if ( _sanityChecksEnabled && ! this . _hasDoneGlobalChecks && _document && isDevMode ( ) ) {
208
+ // Delay running the check to allow more time for the user's styles to load.
198
209
this . _checkDoctype ( ) ;
199
210
this . _checkTheme ( ) ;
200
- hasDoneGlobalChecks = true ;
211
+ this . _hasDoneGlobalChecks = true ;
201
212
}
202
213
}
203
214
204
215
private _checkDoctype ( ) : void {
205
- if ( this . _document && ! this . _document . doctype ) {
216
+ if ( ! this . _document . doctype ) {
206
217
console . warn (
207
218
'Current document does not have a doctype. This may cause ' +
208
219
'some Angular Material components not to behave as expected.'
@@ -211,7 +222,7 @@ export class CompatibilityModule {
211
222
}
212
223
213
224
private _checkTheme ( ) : void {
214
- if ( this . _document && typeof getComputedStyle === 'function' ) {
225
+ if ( typeof getComputedStyle === 'function' ) {
215
226
const testElement = this . _document . createElement ( 'div' ) ;
216
227
217
228
testElement . classList . add ( 'mat-theme-loaded-marker' ) ;
0 commit comments