Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Cannot read property 'bind' of undefined at new MediaMatcher #8710

Closed
Gorniv opened this issue Nov 29, 2017 · 4 comments · Fixed by #8775
Closed

Cannot read property 'bind' of undefined at new MediaMatcher #8710

Gorniv opened this issue Nov 29, 2017 · 4 comments · Fixed by #8775
Assignees
Labels
P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@Gorniv
Copy link

Gorniv commented Nov 29, 2017

Bug

When I use the material for my universal project, I have this problem:
exception:

TypeError: Cannot read property 'bind' of undefined
    at new MediaMatcher (C:\GitHub\AngularMigration-Init\angular2\server.js:137690:30)
    at _createClass (C:\GitHub\AngularMigration-Init\angular2\server.js:15506:20)

source

var MediaMatcher = (function () {
    function MediaMatcher(platform) {
        this.platform = platform;
        this._matchMedia = this.platform.isBrowser ?
            // matchMedia is bound to the window scope intentionally as it is an illegal invocation to
            // call it from a different scope.
            window.matchMedia.bind(window) :
            noopMatchMedia;
    }

What is the expected behavior?

no error

What is the current behavior?

error

What are the steps to reproduce?

https://github.com/Angular-RU/angular-universal-starter/tree/material2
npm run ssr:debug
open http://localhost:4000/material

What is the use-case or motivation for changing an existing behavior?

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

"@angular/cli": "1.6.0-rc.0",
"@angular/core": "5.0.3",
"@angular/material": "5.0.0-rc.2",
"typescript": "2.4.2"

Is there anything else we should know?

@GevorGSM
Copy link

GevorGSM commented Nov 29, 2017

I have the same issue.In my case it is because I inject in app.component MatSnackBar , but I haven`t found solution yet.

@Gorniv
Copy link
Author

Gorniv commented Nov 29, 2017

MatSnackBar working: Angular-RU/universal-starter@b848c41
Now you can fix MediaMatcher like fix.js:

var fs = require('fs')
const someFile = './server.js';
fs.readFile(someFile, 'utf8', function(err, data) {
    if (err) {
        return console.log(err);
    }
    const result = data.replace('this.platform.isBrowser ?', 'this.platform.isBrowser && window.matchMedia !== undefined ?');
    fs.writeFile(someFile, result, 'utf8', function(err) {
        if (err) return console.log(err);
    });
});

@GevorGSM
Copy link

I know,it working for materialPage.component.ts,in my case in this component it working to but I need use snackbar in app.component.spasibo za fix.js,it fix my problem

@josephperrott josephperrott added P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent responsive labels Nov 29, 2017
@josephperrott josephperrott self-assigned this Nov 29, 2017
crisbeto added a commit to crisbeto/material2 that referenced this issue Dec 2, 2017
Adds an extra check to ensure that the current platform supports `window.matchMedia`.

Fixes angular#8710.
@crisbeto crisbeto added the has pr label Dec 2, 2017
jelbourn pushed a commit that referenced this issue Jan 4, 2018
Adds an extra check to ensure that the current platform supports `window.matchMedia`.

Fixes #8710.
jelbourn pushed a commit to jelbourn/components that referenced this issue Jan 8, 2018
…8775)

Adds an extra check to ensure that the current platform supports `window.matchMedia`.

Fixes angular#8710.
jelbourn pushed a commit to jelbourn/components that referenced this issue Jan 9, 2018
…8775)

Adds an extra check to ensure that the current platform supports `window.matchMedia`.

Fixes angular#8710.
jelbourn pushed a commit that referenced this issue Jan 9, 2018
Adds an extra check to ensure that the current platform supports `window.matchMedia`.

Fixes #8710.
tinayuangao pushed a commit that referenced this issue Jan 10, 2018
Adds an extra check to ensure that the current platform supports `window.matchMedia`.

Fixes #8710.
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 8, 2019
# for free to subscribe to this conversation on GitHub. Already have an account? #.
Labels
P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants