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

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?

2
Leave a Reply

avatar
2 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Jason Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Jason
Guest

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

Jason
Guest

You are using the example code as it is. As you can see, it calls a “hasMedia()” method somewhere. This needs to get defined in your component. all_2 something like this points only to your context.