Flex Layout not compatible with TypeScript 3.2

[christopher-kiss]

Bug Report

What is the expected behavior?

When strict mode is turned on in tsconfig.json compiler options, angular should be able to build successfully.

What is the current behavior?

Fails to build angular

ERROR in node_modules/@angular/flex-layout/core/typings/match-media/mock/mock-match-media.d.ts(25,15): error TS2416: Property '_registry' in type 'MockMatchMedia' is not assignable to the same property in base type 'MatchMedia'.
  Type 'Map<string, MockMediaQueryList>' is not assignable to type 'Map<string, MediaQueryList>'.
    Type 'MockMediaQueryList' is not assignable to type 'MediaQueryList'.
      Types of property 'removeListener' are incompatible.
        Type '(_: EventListener | EventListenerObject | null) => void' is not assignable to type '(listener: ((this: MediaQueryList, ev: MediaQueryListEvent) => any) | null) => void'.
          Types of parameters '_' and 'listener' are incompatible.
            Type '((this: MediaQueryList, ev: MediaQueryListEvent) => any) | null' is not assignable to type 'EventListener | EventListenerObject | null'.
              Type '(this: MediaQueryList, ev: MediaQueryListEvent) => any' is not assignable to type 'EventListener | EventListenerObject | null'.
                Type '(this: MediaQueryList, ev: MediaQueryListEvent) => any' is not assignable to type 'EventListener'.
                  Types of parameters 'ev' and 'evt' are incompatible.
                    Type 'Event' is missing the following properties from type 'MediaQueryListEvent': matches, media
node_modules/@angular/flex-layout/core/typings/match-media/mock/mock-match-media.d.ts(82,5): error TS2416: Property 'removeListener' in type 'MockMediaQueryList' is not assignable to the same property in base type 'MediaQueryList'.
  Type '(_: EventListener | EventListenerObject | null) => void' is not
assignable to type '(listener: ((this: MediaQueryList, ev: MediaQueryListEvent) => any) | null) => void'.
    Types of parameters '_' and 'listener' are incompatible.
      Type '((this: MediaQueryList, ev: MediaQueryListEvent) => any) | null' is not assignable to type 'EventListener | EventListenerObject | null'.
        Type '(this: MediaQueryList, ev: MediaQueryListEvent) => any' is not assignable to type 'EventListener | EventListenerObject | null'.
          Type '(this: MediaQueryList, ev: MediaQueryListEvent) => any'
is not assignable to type 'EventListener'.
node_modules/@angular/flex-layout/core/typings/match-media/server-match-media.d.ts(28,5): error TS2416: Property 'removeListener' in type 'ServerMediaQueryList' is not assignable to the same property in base type 'MediaQueryList'.
  Type '(_: EventListener | EventListenerObject | null) => void' is not
assignable to type '(listener: ((this: MediaQueryList, ev: MediaQueryListEvent) => any) | null) => void'.
    Types of parameters '_' and 'listener' are incompatible.
      Type '((this: MediaQueryList, ev: MediaQueryListEvent) => any) | null' is not assignable to type 'EventListener | EventListenerObject | null'.
        Type '(this: MediaQueryList, ev: MediaQueryListEvent) => any' is not assignable to type 'EventListener | EventListenerObject | null'.
          Type '(this: MediaQueryList, ev: MediaQueryListEvent) => any'
is not assignable to type 'EventListener'.
node_modules/@angular/flex-layout/core/typings/match-media/server-match-media.d.ts(44,15): error TS2416: Property '_registry' in type 'ServerMatchMedia' is not assignable to the same property in base type 'MatchMedia'.
  Type 'Map<string, ServerMediaQueryList>' is not assignable to type 'Map<string, MediaQueryList>'.
    Type 'ServerMediaQueryList' is not assignable to type 'MediaQueryList'.
      Types of property 'removeListener' are incompatible.
        Type '(_: EventListener | EventListenerObject | null) => void' is not assignable to type '(listener: ((this: MediaQueryList, ev: MediaQueryListEvent) => any) | null) => void'.
          Types of parameters '_' and 'listener' are incompatible.
            Type '((this: MediaQueryList, ev: MediaQueryListEvent) => any) | null' is not assignable to type 'EventListener | EventListenerObject | null'.
              Type '(this: MediaQueryList, ev: MediaQueryListEvent) => any' is not assignable to type 'EventListener | EventListenerObject | null'.
                Type '(this: MediaQueryList, ev: MediaQueryListEvent) => any' is not assignable to type 'EventListener'.
node_modules/@angular/flex-layout/core/typings/match-media/server-match-media.d.ts(54,15): error TS2416: Property '_buildMQL' in type 'ServerMatchMedia' is not assignable to the same property in base type 'MatchMedia'.
  Type '(query: string) => ServerMediaQueryList' is not assignable to type '(query: string) => MediaQueryList'.
    Type 'ServerMediaQueryList' is not assignable to type 'MediaQueryList'.

What are the steps to reproduce?

• Create a new project ng new test123 with angular-cli v7.2.1
• Install flex-layout npm i -S @angular/flex-layout
• Install angular material, cdk only is ok too ng add @angular/material
• Add flex-layout module to app.module

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

...

imports: [
    BrowserModule,
    AppRoutingModule,
    FlexLayoutModule,
    BrowserAnimationsModule
  ],

...

• Add "strict": true to tsconfig.json
• Run ng build

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

strict mode helps catch user errors and I use it in my project, this should compile the library properly

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

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 7.2.1
Node: 10.2.1
OS: win32 x64
Angular: 7.2.0
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.12.1
@angular-devkit/build-angular     0.12.1
@angular-devkit/build-optimizer   0.12.1
@angular-devkit/build-webpack     0.12.1
@angular-devkit/core              7.2.1
@angular-devkit/schematics        7.2.1
@angular/cdk                      7.2.1
@angular/cli                      7.2.1
@angular/flex-layout              7.0.0-beta.22
@angular/material                 7.2.1
@ngtools/webpack                  7.2.1
@schematics/angular               7.2.1
@schematics/update                0.12.1
rxjs                              6.3.3
typescript                        3.2.2
webpack                           4.23.1

Is there anything else we should know?

There are several related issues and these are all resolved, however only when not using strict mode. With strict mode, it fails to compile.

#971
#861
#973
#851

[CaerusKaru]

Oh wait, you know what this is? We haven't upgraded to TypeScript v3.2 yet. We'll do a version bump PR and sort this out.

[CaerusKaru]

Should be patched by #976

[CaerusKaru]

By the way, ordinarily this wouldn't be an issue, but TypeScript has been having an identity crisis in regards to how they type the DOM. And since we are tied very directly to the DOM's definition of matchMedia, things like this represent breaking changes. Ordinarily, version bumps of TypeScript shouldn't result in errors like this.

[christopher-kiss]

@CaerusKaru,

Thank you for the fix, looking forward to this being released soon.