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?

[juliandavidmr]

Before:

@ViewChild('foo') foo: ElementRef;

After:

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

OR

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

More info

[elvisbegovic]

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' )