ng2-material TypeError: all_2.Media.hasMedia is not a function

Question

I am trying to use ng2-material with angular2.

While trying Sidenav component, I am getting these errors:

EXCEPTION: TypeError: all_2.Media.hasMedia is not a function in [hasMedia('gt-sm') ? 'side' : 'over' in AppComponent@17:32]

EXCEPTION: Error: Uncaught (in promise): EXCEPTION: TypeError: all_2.Media.hasMedia is not a function in [hasMedia('gt-sm') ? 'side' : 'over' in AppComponent@17:32] ORIGINAL EXCEPTION: TypeError: all_2.Media.hasMedia is not a function ORIGINAL STACKTRACE: TypeError: all_2.Media.hasMedia is not a function at AppComponent.hasMedia (http://localhost:3000/app/app.component.js:67:40) at AbstractChangeDetector.ChangeDetector_AppComponent_0.detectChangesInRecordsInternal (viewFactory_AppComponent:114:31) at AbstractChangeDetector.detectChangesInRecords (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:9609:14) at AbstractChangeDetector.runDetectChanges (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:9592:12) at AbstractChangeDetector._detectChangesInViewChildren (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:9671:14) at AbstractChangeDetector.runDetectChanges (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:9596:12) at AbstractChangeDetector.detectChanges (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:9581:12) at ChangeDetectorRef_.detectChanges (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:5252:16) at http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:12954:27 at Array.forEach (native) ERROR CONTEXT: [object Object]

And there are many more errors all related to all_2.Media.hasMedia

Probably this is the code that might be causing it

hasMedia(breakSize: string): boolean {
    return Media.hasMedia(breakSize);
}

I have followed the instructions on ng2-material site and already got ng2-material working.

How should I solve this?

Josh Petite Josh Petite · Accepted Answer · 2016-04-19T03:08:32

The code sample that was originally posted on ng2-material has been updated with a fixed version. This also tripped me up as well and I was seeing the same error that Shri has posted. The fix is to inject Media into the class and use the class local version:

constructor(public sidenav: SidenavService,
            public media: Media) {
}

hasMedia(breakSize: string): boolean {
    return this.media.hasMedia(breakSize);
}

as explained now on the ng2-material website:

https://justindujardin.github.io/ng2-material/#/components/sidenav

ng2-material TypeError: all_2.Media.hasMedia is not a function

2 Answers