feat(ObservableMedia): use ObservableMedia class as provider token

[ThomasBurleson]

• Internal refactor of BreakPoint-related classes and packaging
• Refactor provider implementations for BreakPoints, BreakPointRegistry, & ObservableMedia
• Improved DI with replacement of ObservableMediaService opaque token with ObservableMedia class

BREAKING CHANGE:

Remove ObservableMediaService opaque token; as it adds complexity overhead. Developers should now simply use the ObservableMedia class to inject the service instance.

-before -

import {ObservableMediaService} from '@angular/flex-layout';

@Component({...})
class MyComponent {
   constructor( @Inject(ObserverableMediaService) private media:any ) { ... }
}

-after -

import {ObservableMedia} from '@angular/flex-layout';

@Component({...})
class MyComponent {
  constructor(private media:ObservableMedia) { ... }
}

[joshwiens]

Context

Previous usage example doesn't have a type on the constructor prop, which throws TypeError: Cannot read property 'kind' of undefined on an AOT build in @angular/cli@1.0.0-beta.30.

Reference CLI Issue: angular/angular-cli#4427
Reproducible here: https://github.com/d3viant0ne/flex-layout-prop-type

[ThomasBurleson]

@d3viant0ne - Thx to Josh for this great catch and alert.

[thekalinga]

@ThomasBurleson

Semantically, Why does @Inject(ObservableMediaService) media return ObservableMedia instead of ObservableMediaService?

I'm not specifically asking to return an incompatible object, just that if I inject X, the type of the variable that refers this injected object to should be X or a parent of X

I see that ObservableMediaService is an opaque token & following Service sufix convention when using opaque tokens.

export const ObservableMediaService: OpaqueToken = new OpaqueToken('flex-layout-media-service');

This means, my previous comment is not fully valid.

Is this a standard practice in Angular that tokens that refer to service be named with Service as sufix for their counter part?

[ThomasBurleson]

@thekalinga - when you use @Inject(<token name>) the type can be anything (if you do not explicitly specify). We created the ObservableMedia interface to provide clear usage for the injected reference.

Currently I am not aware of a standard practices for naming Tokens and injected types. I will ask the @angular core team.

[ThomasBurleson]

@d3viant0ne - can you review plz.

[joshwiens]

Certainly, give me 20 minutes

[joshwiens]

Like the DI change, Media Query api / code is nice and tidy now.

Tried you branch on my current work project, after the minor update to the constructor & it's sub, everything worked like a charm. Ship It :)

[angular-automatic-lock-bot]

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.}