Skip to content

Commit

Permalink
feat(theming): log a warning if core theme isn't loaded (#3781)
Browse files Browse the repository at this point in the history 
* feat(theming): log a warning if core theme isn't loaded

* Checks the user's loaded stylesheets and logs a warning if the Material core theme isn't loaded.
* Fixes a wrong `typeof` check when determining the doctype.

Fixes #2828.

Note: I originally went with looping through the `document.styleSheets` to check whether the selector is defined, however I had to switch back to `getComputedStyle`, because browsers don't expose the `document.styleSheets`, if the CSS file is being loaded from another domain. This would've caused the warning to be logged if the user loads over a CDN.

* refactor: address feedback
  • Loading branch information
@crisbeto @tinayuangao
crisbeto authored and tinayuangao committed Mar 29, 2017
1 parent c4ec662 commit 4282917
Show file tree
Hide file tree
Showing 2 changed files with 36 additions and 2 deletions.
5 changes: 5 additions & 0 deletions src/lib/core/_core.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,4 +36,9 @@
$background: map-get($theme, background);
background-color: mat-color($background, background);
}

// Marker that is used to determine whether the user has added a theme to their page.
.mat-theme-loaded-marker {
display: none;
}
}
33 changes: 31 additions & 2 deletions src/lib/core/compatibility/compatibility.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ import {
} from '@angular/core';
import {DOCUMENT} from '@angular/platform-browser';

/** 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');

Expand Down Expand Up @@ -170,14 +172,41 @@ export class CompatibilityModule {
};
}

constructor(@Optional() @Inject(DOCUMENT) document: any) {
if (isDevMode() && typeof document && !document.doctype) {
constructor(@Optional() @Inject(DOCUMENT) private _document: any) {
if (!hasDoneGlobalChecks && isDevMode()) {
this._checkDoctype();
this._checkTheme();
hasDoneGlobalChecks = true;
}
}

private _checkDoctype(): void {
if (this._document && !this._document.doctype) {
console.warn(
'Current document does not have a doctype. This may cause ' +
'some Angular Material components not to behave as expected.'
);
}
}

private _checkTheme(): void {
if (this._document) {
const testElement = this._document.createElement('div');

testElement.classList.add('mat-theme-loaded-marker');
this._document.body.appendChild(testElement);

if (getComputedStyle(testElement).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);
}
}
}


Expand Down

2 comments on commit 4282917

@sasxa
Copy link

@sasxa sasxa commented on 4282917 Mar 30, 2017 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I started getting this new warning in my tests (using latest material2-builds.git). I have custom theme that imports @import '~@angular/material/theming'; and it works when I build/serve app, but it messes up my tests. They restart when this warning appears.

30 03 2017 22:31:41.572:INFO [Chrome 56.0.2924 (Windows 10 0.0.0)]: Connected on socket aic54H4DPIXwZ0gwAAAA with id 11641244
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'
Chrome 56.0.2924 (Windows 10 0.0.0): Executed 0 of 329 SUCCESS (0 secs / 0 secs)
WARN: 'Could not find Angular Material core theme. Most Material components may not work as expected.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'
Chrome 56.0.2924 (Windows 10 0.0.0): Executed 5 of 329 SUCCESS (0 secs / 2.94 secs)
WARN: 'Could not find Angular Material core theme. Most Material components may not work as expected.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'
Chrome 56.0.2924 (Windows 10 0.0.0): Executed 237 of 329 (skipped 10) SUCCESS (0 secs / 19.759 secs)
WARN: 'Could not find Angular Material core theme. Most Material components may not work as expected.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'
Chrome 56.0.2924 (Windows 10 0.0.0): Executed 469 of 329 (skipped 20) SUCCESS (0 secs / 38.026 secs)
WARN: 'Could not find Angular Material core theme. Most Material components may not work as expected.Chrome 56.0.2924 (Windows 10 0.0.0): Executed 481 of 329 (skipped 20) SUCCESS (0 secs / 43.433 secs)
Terminate batch job (Y/N)?

Update 1

I installed previous version:

yarn upgrade git+https://github.com/angular/material2-builds.git#831f9c59847f56f7d61e194119611ec9a62f986f

and tests are working normally again.

Update 2

I looked into this issue further, turns out there was unique interaction with one of my tests that was causing page reload. After fixing that, tests are interrupted once, then executed normally (with latest material2-builds.git)

31 03 2017 10:58:11.041:INFO [Chrome 56.0.2924 (Windows 10 0.0.0)]: Connected on socket 7fFF0bzD5TfO4OxPAAAA with id 74867229
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'
Chrome 56.0.2924 (Windows 10 0.0.0): Executed 0 of 329 SUCCESS (0 secs / 0 secs)
WARN: 'Could not find Angular Material core theme. Most Material components may not work as expected. For more info refeChrome 56.0.2924 (Windows 10 0.0.0): Executed 316 of 329 (skipped 13) SUCCESS (29.226 secs / 28.819 secs)

@Nexarian
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am seeing this error as well. This is what my karma.conf.js looks like:

files: [
      { pattern: 'src/test.ts', watched: false },
      { pattern: 'node_modules/@angular/material/prebuilt-themes/indigo-pink.css', included: true, watched: true }
]

And I still get this error, even though when the Chrome browser loads the theme is clearly being applied. I believe there is some sort of timing error going on where the CSS isn't applied in time for this logic to detect the issue.

Please sign in to comment.