Expected 2 arguments, but got 1.ts(2554) core.d.ts

Question

Error

Expected 2 arguments, but got 1.ts(2554) core.d.ts(8064, 47): An argument for 'opts' was not provided.

Code is from NativeScript Marketplace

https://play.nativescript.org/?template=play-ng&id=Hqp5UQ&v=3073

I've brought the code over verbatim and I"m getting the errors in my export class on

@ViewChild("password") password: ElementRef;
@ViewChild("confirmPassword") confirmPassword: ElementRef;

Does anyone know how to resolve this?

import { Component, ElementRef, ViewChild } from "@angular/core";
import { alert, prompt } from "tns-core-modules/ui/dialogs";
import { Page } from "tns-core-modules/ui/page";
import { RouterExtensions } from "nativescript-angular/router";

import { User } from "../shared/user.model";
import { UserService } from "../shared/user.service";

@Component({
    selector: "app-login",
    moduleId: module.id,
    templateUrl: "./login.component.html",
    styleUrls: ["./login.component.css"]
})
export class LoginComponent {
    isLoggingIn = true;
    user: User;
    processing = false;
    @ViewChild("password") password: ElementRef;
    @ViewChild("confirmPassword") confirmPassword: ElementRef;

    constructor(private page: Page, private userService: UserService, private routerExtensions: RouterExtensions) {
        this.page.actionBarHidden = true;
        this.user = new User();
        this.user.email = "[e-mail]";
        this.user.password = "password";
    }

    toggleForm() {
        this.isLoggingIn = !this.isLoggingIn;
    }

    submit() {
        if (!this.user.email || !this.user.password) {
            this.alert("Please provide both an email address and password.");

            return;
        }

        this.processing = true;
        if (this.isLoggingIn) {
            this.login();
        } else {
            this.register();
        }
    }

    login() {
        this.userService.login(this.user)
            .then(() => {
                this.processing = false;
                this.routerExtensions.navigate(["/home"], { clearHistory: true });
            })
            .catch(() => {
                this.processing = false;
                this.alert("Unfortunately we could not find your account.");
            });
    }

    register() {
        if (this.user.password !== this.user.confirmPassword) {
            this.alert("Your passwords do not match.");

            return;
        }
        this.userService.register(this.user)
            .then(() => {
                this.processing = false;
                this.alert("Your account was successfully created.");
                this.isLoggingIn = true;
            })
            .catch(() => {
                this.processing = false;
                this.alert("Unfortunately we were unable to create your account.");
            });
    }

    forgotPassword() {
        prompt({
            title: "Forgot Password",
            message: "Enter the email address you used to register for APP NAME to reset your password.",
            inputType: "email",
            defaultText: "",
            okButtonText: "Ok",
            cancelButtonText: "Cancel"
        }).then((data) => {
            if (data.result) {
                this.userService.resetPassword(data.text.trim())
                    .then(() => {
                        this.alert(`Your password was successfully reset. Please check your email for
                        instructions on choosing a new password.`);
                    }).catch(() => {
                        this.alert("Unfortunately, an error occurred resetting your password.");
                    });
            }
        });
    }

    focusPassword() {
        this.password.nativeElement.focus();
    }
    focusConfirmPassword() {
        if (!this.isLoggingIn) {
            this.confirmPassword.nativeElement.focus();
        }
    }

    alert(message: string) {
        return alert({
            title: "APP NAME",
            okButtonText: "OK",
            message: ("{message}")
        });
    }
}

The expected output is when the emulator loads it should detect a logged out user and show them the login page.

Answer 1

That is because of breaking change in new Angular. You need to pass like below

@ViewChild("password", { static: true }) password: ElementRef;
@ViewChild("confirmPassword", { static: true }) confirmPassword: ElementRef;

A new static flag has been introduced to not break existing applications, so if you want to keep the old behavior even when you’ll switch to Ivy, you can write:

@ViewChild('password', { static: true }) static: ElementRef<HTMLDivElement>;

You can further read here : https://angular.io/api/core/ViewChild#description