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