Skip to content
New issue

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

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

Already on GitHub? Sign in to your account

MatchMediaObservable : Upgrade from 2.0.0-beta.1 to 2.0.0-beta.3 #125

Closed
maxime1992 opened this issue Jan 23, 2017 · 12 comments · Fixed by #133
Closed

MatchMediaObservable : Upgrade from 2.0.0-beta.1 to 2.0.0-beta.3 #125

maxime1992 opened this issue Jan 23, 2017 · 12 comments · Fixed by #133
Labels
bug has pr A PR has been created to address this issue in-progress
Milestone

Comments

@maxime1992
Copy link

maxime1992 commented Jan 23, 2017

I tried to upgrade from 2.0.0-beta.1 to 2.0.0-beta.3 and it now breaks saying that :
EXCEPTION: Uncaught (in promise): Error: Error in :0:0 caused by: this.media$.map is not a function TypeError: this.media$.map is not a function

My code :

constructor(@Inject(MatchMediaObservable) public media$) { }

this.media$
  .map((change: MediaChange) => { ... });

I looked in release notes and changelog but couldn't find anything about breaking change.

@ThomasBurleson
Copy link
Contributor

@maxime1992 - we will investigate. Thank you.

@ThomasBurleson
Copy link
Contributor

This works using the following in package.json:

  "dependencies": {
    "@angular/flex-layout": "^2.0.0-beta.3",
}

@maxime1992
Copy link
Author

@ThomasBurleson I tried to do that but I still have the same error.

@ThomasBurleson
Copy link
Contributor

Are you importing the rxjs map operator?

@ThomasBurleson
Copy link
Contributor

ThomasBurleson commented Jan 25, 2017

Are you importing the RxJS map operator ?

import 'rxjs/add/operator/map';
``

@maxime1992
Copy link
Author

Here's what I import :

// statics
import 'rxjs/add/observable/throw';
// operators
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/delay';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/let';
import 'rxjs/add/operator/switchMap';
import 'rxjs/add/operator/toPromise';
import 'rxjs/add/operator/withLatestFrom';
import 'rxjs/add/operator/combineLatest';

// observables
import 'rxjs/add/observable/empty';

So yes I do have map operator.

@ThomasBurleson
Copy link
Contributor

@maxime1992 - It is almost impossible to support issues with Plunkrs that our team can use to reproduce the issue. Unless you have a Plunkr that demonstrates this problem, I will be forced to close this issue.

Plunkrs and source are critical to fast resolutions.

@ThomasBurleson
Copy link
Contributor

@maxime1992 - My apologies sir. The issue is within flex-layout: MatchMediaObservable is not a real observable. It is a wrapper around the observable because we expose a isActive(<alias>) method also.

This means the RxJS operators will NOT work because the reference is not a real observable.

I think the API for MatchMediaObservable needs to some work.

@ThomasBurleson ThomasBurleson added this to the v2.0.0-beta.4 milestone Jan 25, 2017
@ThomasBurleson
Copy link
Contributor

This will be fixed within the next 1-2 days. Thank you.

@ThomasBurleson
Copy link
Contributor

@maxime1992 - see #133

@ThomasBurleson ThomasBurleson added the has pr A PR has been created to address this issue label Jan 25, 2017
@maxime1992
Copy link
Author

@ThomasBurleson I usually try to help as much as I can by giving a Plunkr but as I really thought it was no big deal I didn't provide one this time.

No problem, thank you for being so reactive 😄

Cheers 🍻

ThomasBurleson added a commit that referenced this issue Jan 26, 2017
* rename token to 'ObservableMediaService'
* rename MatchMediaObservableProvider to ObservableMediaServiceProvider
* add method `.asObservable()` to MediaService

fixes #125.
ThomasBurleson added a commit that referenced this issue Jan 26, 2017
* rename token to 'ObservableMediaService'
* rename MatchMediaObservableProvider to ObservableMediaServiceProvider
* add method `.asObservable()` to MediaService

fixes #125.
ThomasBurleson added a commit that referenced this issue Jan 26, 2017
* rename token to 'ObservableMediaService'
* rename MatchMediaObservableProvider to ObservableMediaServiceProvider
* add method `.asObservable()` to MediaService

fixes #125.
ThomasBurleson added a commit that referenced this issue Jan 26, 2017
* rename token to 'ObservableMediaService'
* rename MatchMediaObservableProvider to ObservableMediaServiceProvider
* add method `.asObservable()` to MediaService

fixes #125.
ThomasBurleson added a commit that referenced this issue Jan 26, 2017
* rename token to 'ObservableMediaService'
* rename MatchMediaObservableProvider to ObservableMediaServiceProvider
* add method `.asObservable()` to MediaService

BREAKING CHANGE:

* use opaque token `ObservableMediateService` to inject instance of `MediaService`
* use `MediaService::asObservable()` to get instance of observable

```js
// RxJS
import 'rxjs/add/operator/map';

@component({ ... })
export class MyComponent {
  constructor( @Inject(ObservableMediaService) media) {
    media.asObservable()
      .map( (change:MediaChange) => change.mqAlias == 'md' )
      .subscribe((change:MediaChange) => {
        let state = change ? `'${change.mqAlias}' = (${change.mediaQuery})` : ""
        console.log( state );
      });
  }
}
```

fixes #125.
andrewseguin pushed a commit that referenced this issue Jan 26, 2017
* fix(matchMediaObservable): expose observable for rxjs operators

* rename token to 'ObservableMediaService'
* rename MatchMediaObservableProvider to ObservableMediaServiceProvider
* add method `.asObservable()` to MediaService

BREAKING CHANGE:

* use opaque token `ObservableMediateService` to inject instance of `MediaService`
* use `MediaService::asObservable()` to get instance of observable

```js
// RxJS
import 'rxjs/add/operator/map';

@component({ ... })
export class MyComponent {
  constructor( @Inject(ObservableMediaService) media) {
    media.asObservable()
      .map( (change:MediaChange) => change.mqAlias == 'md' )
      .subscribe((change:MediaChange) => {
        let state = change ? `'${change.mqAlias}' = (${change.mediaQuery})` : ""
        console.log( state );
      });
  }
}
```

fixes #125.

* update(demo): fix imports for observable-media-service
@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 4, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
bug has pr A PR has been created to address this issue in-progress
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants