angular-cli: error TS2554: Expected 2 arguments, but got 1 in v8

🐞 Bug report

Command (mark with an `x`)

- [ ] new
- [ ] build
- [x] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Description

Just updated to v8 and on ng serve got a lot of TS2554 errors. All on ViewChild decorators. On top of it all, TSlint in VSCode marks all imports from angular related packages as invalid.

🔬 Minimal Reproduction

https://github.com/rip222/viewChild-test-ng8 –>

🔥 Exception or Error


ERROR in src/app/admin/blog-form/blog-form.component.ts(30,4): error TS2554: Expected 2 arguments, but got 1.
src/app/admin/booking-form/booking-form.component.ts(15,4): error TS2554: Expected 2 arguments, but got
1.
src/app/admin/bookings/bookings.component.ts(25,4): error TS2554: Expected 2 arguments, but got 1.
src/app/admin/bookings/bookings.component.ts(26,4): error TS2554: Expected 2 arguments, but got 1.
src/app/admin/fake-bookings/fake-bookings.component.ts(16,4): error TS2554: Expected 2 arguments, but got 1.
src/app/admin/questions/questions.component.ts(18,4): error TS2554: Expected 2 arguments, but got 1.
src/app/admin/questions/questions.component.ts(19,4): error TS2554: Expected 2 arguments, but got 1.
src/app/booking/booking.component.ts(40,4): error TS2554: Expected 2 arguments, but got 1.
src/app/faq/faq.component.ts(19,4): error TS2554: Expected 2 arguments, but got 1.

🌍 Your Environment



Angular CLI: 8.0.0
Node: 10.15.3
OS: linux x64
Angular: 8.0.0
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router, service-worker

Package                                    Version
--------------------------------------------------------------------
@angular-devkit/architect                  0.800.0
@angular-devkit/build-angular              0.800.0
@angular-devkit/build-optimizer            0.800.0
@angular-devkit/build-webpack              0.800.0
@angular-devkit/core                       8.0.0
@angular-devkit/schematics                 8.0.0
@angular/cdk                               7.3.7
@angular/fire                              5.1.3
@angular/material                          7.3.7
@angular/pwa                               0.12.4
@ngtools/webpack                           8.0.0
@nguniversal/express-engine                7.1.1
@nguniversal/module-map-ngfactory-loader   7.1.1
@schematics/angular                        8.0.0
@schematics/update                         0.800.0
rxjs                                       6.5.2
typescript                                 3.4.5
webpack                                    4.30.0

Anything else relevant?

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 14
Comments: 28 (4 by maintainers)

Commits related to this issue

Explicitly make all ViewChildren static See: https://github.com/angular/angular-cli/issues/14553#issuecomment-496819379 Fixes build error "TS2554: Expected 2 arguments, but got 1." — committed to azavea/temperate by flibbertigibbet 5 years ago

Most upvoted comments

Before:

@ViewChild('foo') foo: ElementRef;

After:

// query results available in ngOnInit @ViewChild('foo', {static: true}) foo: ElementRef;

// query results available in ngAfterViewInit @ViewChild('foo', {static: false}) foo: ElementRef;

More info

+81

juliandavidmr on Jun 1, 2019

in v8 ViewChild syntax changed CHANGELOG says

core: In Angular version 8, it’s required that all @ViewChild and @ContentChild queries have a ‘static’ flag specifying whether the query is ‘static’ or ‘dynamic’. The compiler previously sorted queries automatically, but in 8.0 developers are required to explicitly specify which behavior is wanted. This is a temporary requirement as part of a migration; see https://v8.angular.io/guide/static-query-migration for more details.

And I advice to use https://github.com/angular/angular/blob/master/CHANGELOG.md to update

In case of “lot ts errors”, I guess you have fullTemplateTypeCheck in your tsconfig file which is fine and I recommend to add it.

Have you SFC ? Is your template inside your .ts file ? If yes I doupt you use some pipe without specify all parameters ? If it is the case you can make parameters of pipe as optional like

transform(value: any, anotherparam?): any {

Otherwise you can have some hostlistener with no needed second param which was working without fullTemplateTypeCheck:

  @HostListener('window:beforeunload', ['$event'] )

It should be

  @HostListener('window:beforeunload' )

+16

elvisbegovic on May 29, 2019

HI ,

I am also faced same error while upgrading angular version to 8

Screenshot (255)

after i added like below it is working fine now

@ContentChild('editTemplate',{ read: true, static: false })

+15

kumaresan-subramani on May 29, 2019

@TunMyintThein1995 Add the static flag like this: @ViewChild(MatSort, { static: false }) sort: MatSort;

omar-dulaimi on Aug 3, 2019

Adding {static: false} of course fixes this, but wouldn’t it have been better to have a sensible default rather than force widespread code base updates?

chriszrc on Jun 20, 2019

I added the ‘static’ flag and got a new error with my MatPaginator: Cannot read property ‘page’ of undefined. Did this happen to anyone else?

@ViewChild(‘mapViewNode’, {static: true}) private mapViewEl: ElementRef; that resolved “_Cannot find namespace '_esri’., and compiled successfully”

ramkolla on Jul 22, 2019

@chriszrc did you read https://angular.io/guide/static-query-migration#why-do-i-have-to-specify-static-false-isnt-that-the-default ?

elvisbegovic on Jun 20, 2019

I think it’s pretty clear at this point and this thread can be closed

rip222 on Jun 3, 2019

This seems like a bug but we’ll need to look at a reproduction to find and fix the problem. Can you setup a minimal repro please?

You can read here why this is needed. A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

This might be related to your directory structure so its really important to get an accurate repro to diagnose this.

https://github.com/rip222/viewChild-test-ng8

rip222 on May 29, 2019