CODEWITHSUNDEEP
angularangular-material
Shri
Shri

Reputation: 834

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?

Upvotes: 0

Views: 161

Answers (2)

Josh Petite
Josh Petite

Reputation: 1

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

Upvotes: 0

Michael Baarz
Michael Baarz

Reputation: 422

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.

Upvotes: -1

Related Questions