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

Cannot compile with typescript 3.1.1 #851

Closed
olaf89 opened this issue Sep 28, 2018 · 60 comments · Fixed by #855
Closed

Cannot compile with typescript 3.1.1 #851

olaf89 opened this issue Sep 28, 2018 · 60 comments · Fixed by #855
Assignees
Labels
build has pr A PR has been created to address this issue P2 Issue that is important to resolve as soon as possible related: angular-core related: material2

Comments

@olaf89
Copy link

olaf89 commented Sep 28, 2018

Bug Report

What is the expected behavior?

Cannot compile with typescript 3.1.1

What is the current behavior?

Im getting following errors:

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'.
      Property 'onchange' is missing in type 'MockMediaQueryList'.
node_modules/@angular/flex-layout/core/typings/match-media/mock/mock-match-media.d.ts(63,22): error TS2420: Class 'MockMediaQueryList' incorrectly implements interface 'MediaQueryList'.
  Property 'onchange' is missing in type 'MockMediaQueryList'.
node_modules/@angular/flex-layout/core/typings/match-media/mock/mock-match-media.d.ts(80,27): error TS2304: Cannot find name 'MediaQueryListListener'.
node_modules/@angular/flex-layout/core/typings/match-media/mock/mock-match-media.d.ts(82,23): error TS2304: Cannot find name 'MediaQueryListListener'.
node_modules/@angular/flex-layout/core/typings/match-media/server-match-media.d.ts(11,22): error TS2420: Class 'ServerMediaQueryList' incorrectly implements interface 'MediaQueryList'.
  Property 'onchange' is missing in type 'ServerMediaQueryList'.
node_modules/@angular/flex-layout/core/typings/match-media/server-match-media.d.ts(28,27): error TS2304: Cannot find name 'MediaQueryListListener'.
node_modules/@angular/flex-layout/core/typings/match-media/server-match-media.d.ts(30,23): error TS2304: Cannot find name 'MediaQueryListListener'.
node_modules/@angular/flex-layout/core/typings/match-media/server-match-media.d.ts(42,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'.
      Property 'onchange' is missing in type 'ServerMediaQueryList'.
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?

Compile app using typescript 3.1.1 and flex-layout 6.0.0-beta.18

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

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

Is there anything else we should know?

@CaerusKaru CaerusKaru added build related: angular-core P2 Issue that is important to resolve as soon as possible related: material2 labels Sep 28, 2018
@CaerusKaru CaerusKaru self-assigned this Sep 28, 2018
@CaerusKaru CaerusKaru added this to the v6.0.0-beta.19 milestone Sep 28, 2018
@CaerusKaru
Copy link
Member

We'll need to wait for Material to update to TS v3.1.x before we move, because we have a peer dependency on the CDK. They'll likely update once Angular v7 goes into RC in the next few weeks.

@matheusdavidson
Copy link

Angular 7 RC is out, Angular Material and CDK has a beta, is there any way i can use flex-layout with ng 7rc ?

@CaerusKaru
Copy link
Member

See angular/components#13359

@CaerusKaru
Copy link
Member

Blocked on angular/components#13384

@xmlking
Copy link

xmlking commented Oct 2, 2018

material2 7.0.0-rc.0 release

@Splaktar
Copy link
Member

Splaktar commented Oct 3, 2018

Yep, thankfully angular/components#13384 and angular/components#13359 were merged and 7.0.0-rc.0 has been released.

This library and @angular/fire are the two holding me back from fully testing the RC atm.

Thanks for the hard work @CaerusKaru!

@angular angular deleted a comment from whitewaves Oct 3, 2018
@CaerusKaru CaerusKaru added the has pr A PR has been created to address this issue label Oct 4, 2018
@CaerusKaru
Copy link
Member

I've added the necessary patches in #855, and CI looks good, so we should be able to get this merged into the nightly tomorrow, targeting a 7.0.0 release either late this week or early next week.

CaerusKaru added a commit that referenced this issue Oct 5, 2018
* Upgrade to Angular v7
* Upgrade to Angular Material v7
* Add nostrictPropertyInitialization flag
* Add noUnusedLocals flag and remove tslint option
* Add noImplicitThis flag
* Add noImplicitAny flag
* Enable strictMetadataEmit flag
* Various refactors to support the above flags
* Switch to yarn

Fixes #851
@Splaktar
Copy link
Member

Splaktar commented Oct 8, 2018

I installed the nightly via "@angular/flex-layout": "https://github.com/angular/flex-layout-builds#7.0.0-beta.19-2401536", but I am still seeing the same kind of failures:

BUILD ERROR
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'.
      Property 'onchange' is missing in type 'MockMediaQueryList'.
node_modules/@angular/flex-layout/core/typings/match-media/mock/mock-match-media.d.ts(63,22): error TS2420: Class 'MockMediaQueryList' incorrectly implements interface 'MediaQueryList'.
  Property 'onchange' is missing in type 'MockMediaQueryList'.
node_modules/@angular/flex-layout/core/typings/match-media/mock/mock-match-media.d.ts(80,27): error TS2304: Cannot find name 'MediaQueryListListener'.
node_modules/@angular/flex-layout/core/typings/match-media/mock/mock-match-media.d.ts(82,23): error TS2304: Cannot find name 'MediaQueryListListener'.
node_modules/@angular/flex-layout/core/typings/match-media/server-match-media.d.ts(11,22): error TS2420: Class 'ServerMediaQueryList' incorrectly implements interface 'MediaQueryList'.
  Property 'onchange' is missing in type 'ServerMediaQueryList'.
node_modules/@angular/flex-layout/core/typings/match-media/server-match-media.d.ts(28,27): error TS2304: Cannot find name 'MediaQueryListListener'.
node_modules/@angular/flex-layout/core/typings/match-media/server-match-media.d.ts(30,23): error TS2304: Cannot find name 'MediaQueryListListener'.
node_modules/@angular/flex-layout/core/typings/match-media/server-match-media.d.ts(42,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'.
      Property 'onchange' is missing in type 'ServerMediaQueryList'.
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'.

I'm not sure if I need to wait for the NPM release or if I'm doing something wrong here.

I tried the instructions here including rm -rf node_modules/, but got the same result.

@CaerusKaru
Copy link
Member

You’re not doing anything wrong. Somehow along the way I did everything except actually upgrade the version of TS. I’ll do that now.

@CaerusKaru
Copy link
Member

@Splaktar should be fixed with latest commit. Please let me know of any ill-effects by filing a new issue.

@mattma
Copy link

mattma commented Oct 8, 2018

@CaerusKaru When the Beta.19 will be released? Thanks for the great work!

@CaerusKaru
Copy link
Member

@mattma see #859

@Splaktar
Copy link
Member

Splaktar commented Oct 8, 2018

Thanks, #860 does indeed resolve this for me in the latest build.

Splaktar added a commit to DevIntent/dev that referenced this issue Oct 8, 2018
setup Angular Material properly since ng add failed
build errors due to angular/flex-layout#851
@angular angular deleted a comment from kuncevic Oct 9, 2018
@sanketdambhe
Copy link

use previous version of flex i.e before 7.0.0-beta.19
Compile app using typescript 3.1.1 and flex-layout 6.0.0-beta.18

npm install @angular/flex-layout@6.0.0-beta.18

@tan2411
Copy link

tan2411 commented Oct 10, 2018

npm install @angular/flex-layout@6.0.0-beta.18

Getting this error

ERROR in node_modules/@angular/flex-layout/extended/typings/style/style.d.ts(72,67): error TS1144: '{' or ';' expected.
node_modules/@angular/flex-layout/extended/typings/style/style.d.ts(74,5): error TS1128: Declaration or statement expected.
node_modules/@angular/flex-layout/extended/typings/style/style.d.ts(74,33): error TS1005: ';' expected.
node_modules/@angular/flex-layout/extended/typings/style/style.d.ts(74,39): error TS1109: Expression expected.
node_modules/@angular/flex-layout/extended/typings/style/style.d.ts(79,5): error TS1128: Declaration or statement expected.
node_modules/@angular/flex-layout/extended/typings/style/style.d.ts(80,1): error TS1128: Declaration or statement expected.

@sivagopi5072
Copy link

@Splaktar i am using windows 7 ultimate. Now i am implementing the command ng update and will send you the update

@sivagopi5072
Copy link

@Splaktar Thanks for your suggestions. I got resolved the issues by using Command ng update --all

@dancar
Copy link

dancar commented Nov 1, 2018

adding my experience of 30 minutes 35 seconds for completion of ng update --all - don't lose hope guys!

@darkyelox
Copy link

This is a shame, i can't use this in my Angular CLI 7 project, i guess someone found found a real solution because no one presented here works to me

@darkyelox
Copy link

This worked for me using the latest angular cli, two commands:
ng update --all
npm install angular/flex-layout-builds --save

@ekodikara
Copy link

I just run npm install again and its worked for me..

Angular: 7.0.2
... animations, cdk, common, compiler, compiler-cli, core, forms
... http, language-service, material, material-moment-adapter
... platform-browser, platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.10.4
@angular-devkit/build-angular     0.10.4
@angular-devkit/build-optimizer   0.10.4
@angular-devkit/build-webpack     0.10.4
@angular-devkit/core              7.0.4                 v7/electron (schedule-v7)@angular-devkit/schematics        7.0.4
@angular/cli                      7.0.4
@angular/flex-layout              7.0.0-beta.19
@ngtools/webpack                  7.0.4
@schematics/angular               7.0.4
@schematics/update                0.10.4
rxjs                              6.3.3
typescript                        3.1.6
webpack                           4.19.1

@cozmik
Copy link

cozmik commented Nov 5, 2018

I had the same issue. I guess the latest version of Flex Layout is not compatible with the older version of Angular. I ran ng-update --all and I was good to go. Also updated my typescript version to 3.1.1.

This worked for me, thanks.. i had to use --force though

@mdhilwan
Copy link

I had some issues with 7.0.0-beta-19. As reported by others previously it had issues if you did not use the correct version of TypeScript. For me, I was still on TypeScript 2.4.2.

Flex-layout 6.0.0-beta.18 failed for me as well.
But... Flex-layout 5.0.0-beta.15 worked for me.

Hope that helped someone here.

@newschapmj1
Copy link

I had just migrated a project from Angular 6 to 7 and got the error above.
Running ng update --all fixed the problem for me.

UPDATE package.json (3868 bytes)
added 50 packages from 58 contributors, removed 24 packages, updated 38 packages, moved 3 packages and audited 26401 packages in 19.694s

@cadaats
Copy link

cadaats commented Nov 28, 2018

I still get this error on running [ng update --all], any help appreciated!!

error TS2322: Type 'MediaQueryListEvent' is not assignable to type 'MediaQueryList'.

error TS2322: Type 'MediaQueryListEvent' is not assignable to type 'MediaQueryList'.
Property 'onchange' is missing in type 'MediaQueryListEvent'.

Package Version

@angular-devkit/architect 0.11.0
@angular-devkit/build-angular 0.11.0
@angular-devkit/build-optimizer 0.11.0
@angular-devkit/build-webpack 0.11.0
@angular-devkit/core 7.1.0
@angular-devkit/schematics 7.1.0
@angular/flex-layout 7.0.0-beta.19
@ngtools/webpack 7.1.0
@schematics/angular 7.1.0
@schematics/update 0.11.0
rxjs 6.3.3
typescript 3.1.6
webpack 4.23.1

@mdhilwan
Copy link

Have you tried with “Flex-layout 6.0.0-beta.18”?

@cadaats
Copy link

cadaats commented Nov 28, 2018

      Have you tried with “Flex-layout 6.0.0-beta.18”?

No luck, It asked me to downgrade angular to 6, but since its just a warning, I ignored and still got a bunch of errors

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'.
Property 'onchange' is missing in type 'MockMediaQueryList'.
node_modules/@angular/flex-layout/core/typings/match-media/mock/mock-match-media.d.ts(63,22): error TS2420: Class 'MockMediaQueryList' incorrectly implements interface 'MediaQueryList'.
Property 'onchange' is missing in type 'MockMediaQueryList'.
node_modules/@angular/flex-layout/core/typings/match-media/mock/mock-match-media.d.ts(80,27): error TS2304: Cannot find name 'MediaQueryListListener'.
node_modules/@angular/flex-layout/core/typings/match-media/mock/mock-match-media.d.ts(82,23): error TS2304: Cannot find name 'MediaQueryListListener'.
node_modules/@angular/flex-layout/core/typings/match-media/server-match-media.d.ts(11,22): error TS2420: Class 'ServerMediaQueryList' incorrectly implements interface 'MediaQueryList'.
Property 'onchange' is missing in type 'ServerMediaQueryList'.
node_modules/@angular/flex-layout/core/typings/match-media/server-match-media.d.ts(28,27): error TS2304: Cannot find name 'MediaQueryListListener'.
node_modules/@angular/flex-layout/core/typings/match-media/server-match-media.d.ts(30,23): error TS2304: Cannot find name 'MediaQueryListListener'.
node_modules/@angular/flex-layout/core/typings/match-media/server-match-media.d.ts(42,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'.
Property 'onchange' is missing in type 'ServerMediaQueryList'.
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'.
src/app/ordermanagement/components/side-nav/side-nav.component.ts(15,22): error TS2322: Type 'MediaQueryListEvent' is not assignable to type 'MediaQueryList'.
src/app/ordermanagement/components/side-nav/side-nav.component.ts(15,22): error TS2322: Type 'MediaQueryListEvent' is not assignable to type 'MediaQueryList'.
Property 'onchange' is missing in type 'MediaQueryListEvent'.

@cadaats
Copy link

cadaats commented Nov 28, 2018

@darkyelox - Can you post your ng version ? I too tried all work arounds on this page and still no luck

@cadaats
Copy link

cadaats commented Nov 29, 2018

I changed my code from commented line to the one below and it started working. I believe the latest 7.1.1 has changed code or fixed it. Am less than a week into angular/web technologies, I appreciate if someone can explain if this is right way to fix it or is there a better way to do it?

Code snippet:

private mediaMatcher: MediaQueryList = matchMedia(`(max-width: ${SMALL_WIDTH_BREAKPOINT}px)`);
  constructor(zone: NgZone) {
    this.mediaMatcher.addListener(mql =>
                     ///zone.run(() => this.mediaMatcher = mql))); //This is old code
                    zone.run(() => **this.mediaMatcher = matchMedia(`(max-width: ${SMALL_WIDTH_BREAKPOINT}px)`)**)); //This works!!
   }

@Splaktar
Copy link
Member

@cadaats you probably want to ask in Gitter rather than in a closed issue.

@cadaats
Copy link

cadaats commented Nov 29, 2018

@Splaktar - thanks, it helps.

@WaltEhren
Copy link

WaltEhren commented Dec 13, 2018

If anyone still has that problem and nothing worked, I have another fix.
Keep in mind that I'm using angular 7+.

npm install @angular/flex-layout@latest

@cristtopher
Copy link

cristtopher commented Dec 14, 2018

the problem persists for me, I have angular v7, and I have tested with flex-layout beta 18 and 19, in both I have the same error, changing typescript version, and with @cadaats 's snippet.

ERROR in src/app/core/admin-layout/admin-layout.component.ts(54,9): error TS2322: Type 'MediaQueryListEvent' is not assignable to type 'MediaQueryList'. Property 'onchange' is missing in type 'MediaQueryListEvent'.

admin-layout.component.ts(54,9)

    private router: Router,
    zone: NgZone
  ) {
    this.mediaMatcher.addListener(mql =>
      zone.run(() => {
        console.log('mql', mql);
        this.mediaMatcher = mql;
      })
    );
  }

Package version
"@agm/core": "^1.0.0-beta.5",
"@angular/animations": "^7.1.3",
"@angular/cdk": "^7.1.1",
"@angular/common": "7.1.3",
"@angular/compiler": "7.1.3",
"@angular/core": "7.1.3",
"@angular/flex-layout": "^7.0.0-beta.19",
"@angular/forms": "7.1.3",
"@angular/http": "7.1.3",
"@angular/material": "^7.1.1",
"@angular/material-moment-adapter": "7.1.1",
"@angular/platform-browser": "7.1.3",
"@angular/platform-browser-dynamic": "7.1.3",
"@angular/router": "7.1.3",
"rxjs": "^6.3.3",
"rxjs-compat": "^6.3.3"

"typescript": "3.1.6",
"@angular-devkit/build-angular": "~0.11.0",
"@angular/cli": "7.1.3",
"@angular/compiler-cli": "7.1.3"

@PiotrGutowski
Copy link

Unfortunately I have the same problem as @cristtopher

@cadaats
Copy link

cadaats commented Dec 18, 2018

@cristtopher / @PiotrGutowski - my snippet doesn't assign mql, but re-assign the matchmedia statement (remove the *** and try it)
Also, this below code using changeDetectorRef should help
https://stackblitz.com/angular/yvojdgpveqo?file=app%2Fsidenav-responsive-example.ts

@PiotrGutowski
Copy link

@cadaats Great , it works! Thanks

@SSTPIERRE2
Copy link

@tan2411 you should have seen some errors when you installed 7.0.0-beta.19 like this:

npm WARN @angular/flex-layout@7.0.0-beta.19 requires a peer of @angular/cdk@^7.0.0-rc.0 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/flex-layout@7.0.0-beta.19 requires a peer of @angular/core@>=7.0.0-rc.0 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/flex-layout@7.0.0-beta.19 requires a peer of @angular/common@>=7.0.0-rc.0 but none is installed. You must install peer dependencies yourself.

This is because Angular ^7.0.0-rc.0 is required and you are running 6.1.10.

This is a good point about using angular 7.x with flex layout 7.x. I landed here after rolling back this package to the latest 6.x because I'm having issues with breakpoints & media queries in 7.0.0-beta.19 (beta.22 along with #945 should fix that 🙏). The rollback worked great for the UI, but the frontend tests won't build, so for anyone trying to do what I did, you will have to use angular 7.x with flex-layout 7.x.

@Saroj12345
Copy link

ng update --all worked for me after that got below issue

ERROR in The Angular Compiler requires TypeScript >=3.1.1 and <3.3.0 but 3.3.3 was found instead. in angular 7

solved it using npm i typescript@3.1.6 --save-dev --save-exact

@AskYous
Copy link

AskYous commented Mar 1, 2019

I ran npm install @angular/flex-layout@latest and it worked for me.

@samanmunikar
Copy link

Update to FlexLayout to @angular/flex-layout@7.0.0-beta.24

ng install @angular/flex-layout@7.0.0-beta.24

It worked for me.

@rwoody
Copy link

rwoody commented Jun 12, 2019

Still getting this error with:

  • @angular/flex-layout@7.0.0-beta.24
  • Angular 7.2.15
  • TypeScript 3.1.6 (strict)

@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 5, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
build has pr A PR has been created to address this issue P2 Issue that is important to resolve as soon as possible related: angular-core related: material2
Projects
None yet
Development

Successfully merging a pull request may close this issue.