Skip to content
This repository was archived by the owner on Jan 6, 2025. It is now read-only.
This repository was archived by the owner on Jan 6, 2025. It is now read-only.

Flex Layout not compatible with TypeScript 3.2 #975

Closed
@christopher-kiss

Description

@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

Metadata

Metadata

Assignees

Labels

P0Critical issue that needs to be resolved immediatelybugbuildhas prA PR has been created to address this issue

Type

No type

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions