102

I am getting the type error, "Expected 0 type arguments, but got 1" despite following this tutorial to a T. https://youtu.be/I317BhehZKM?t=57s

I have specified:

  newUserInfoComplete:boolean = false

yet I am getting the error specified above on <boolean> in this line:

  @Output() newUserInfoCompleteEvent = new EventEmitter <boolean> ();

Also, if I simply omit <boolean> I get this error:

Argument of type 'boolean' is not assignable to parameter of type 'string'.

and this.NewUserInfoComplete is underlined here:

this.newUserInfoCompleteEvent.emit(this.newUserInfoComplete);

Here is my component:

import { Component, OnInit, Output } from '@angular/core';
import { slideToRight } from '../../../../router.animations';
import { Router, ActivatedRoute, UrlSegment } from '@angular/router';
import { EventEmitter } from 'protractor';

@Component({
  selector: 'app-new-user-input',
  templateUrl: './new-user-input.component.html',
  styleUrls: ['./new-user-input.component.css'],
  animations: [slideToRight()]
})
export class NewUserInputComponent implements OnInit {

  newUserInfoComplete:boolean = false

  @Output() newUserInfoCompleteEvent = new EventEmitter <boolean> ();

  constructor(private router: Router, r: ActivatedRoute) {
    r.url.subscribe((s: UrlSegment[]) => {
      console.log("url", s); //https://vsavkin.com/angular-router-understanding-router-state-7b5b95a12eab
    });
  }

  ngOnInit() {
  }



  sendNewUserInfoComplete(){
    this.newUserInfoCompleteEvent.emit(this.newUserInfoComplete);
  }


  displaySibling() {
    console.log(this.router);
    this.router.navigate(['../', { outlets: { newuserorginfo: ['newuserorginfo'] } }])
  }

  closeBlade() {
    this.router.navigate([{ outlets: { newuserinput: null } }]);
  }

}
1
  • PSA: Please stop adding answers that just say "Import from angular instead of some other path." The top answer already says this. May 1 at 19:59

4 Answers 4

296

Try importing EventEmitter from @angualar/core instead of from protractor:

import { Component, OnInit, Output, EventEmitter } from '@angular/core';
5
  • 7
    By default it was importing the EventEmitter from 'Events'. Just be sure to see where its being imported from.
    – tony2tones
    Jul 6, 2019 at 10:35
  • 3
    My import was : import { EventEmitter } from 'events'. Changing it to @angular/core fixed it.
    – CFNinja
    Sep 18, 2019 at 15:46
  • 4
    Yeah I'm using vscode and I'm not sure why it auto-imported from the wrong place. This was definitely my problem
    – Callat
    Sep 27, 2019 at 18:49
  • 3
    VS Code still auto-imports from protractor, this answer solved the problem for me as well. Thanks. Sep 9, 2020 at 23:02
  • VS Code auto import it from stream
    – Ali
    Nov 5, 2022 at 16:36
9

I forgot to check my imports! Darn. I was using PROTRACTOR'S event emitter and not angular core Event Emitter

import { EventEmitter } from '@angular/core';
import { Component, OnInit, Output } from '@angular/core';
import { slideToRight } from '../../../../router.animations';
import { Router, ActivatedRoute, UrlSegment } from '@angular/router';

@Component({
  selector: 'app-new-user-input',
  templateUrl: './new-user-input.component.html',
  styleUrls: ['./new-user-input.component.css'],
  animations: [slideToRight()]
})
export class NewUserInputComponent implements OnInit {

  newUserInfoComplete = false;

  @Output() newUserInfoCompleteEvent = new EventEmitter<boolean>();

  constructor(private router: Router, r: ActivatedRoute) {
    r.url.subscribe((s: UrlSegment[]) => {
      console.log("url", s); //https://vsavkin.com/angular-router-understanding-router-state-7b5b95a12eab
    });
  }

  ngOnInit() {
  }



  sendNewUserInfoComplete() {
    this.newUserInfoCompleteEvent.emit(this.newUserInfoComplete);
  }


  displaySibling() {
    console.log(this.router);
    this.router.navigate(['../', { outlets: { newuserorginfo: ['newuserorginfo'] } }])
  }

  closeBlade() {
    this.router.navigate([{ outlets: { newuserinput: null } }]);
  }

}
5

As mentioned in the top answer, don't import EventEmitter from 'protractor', import it from '@angular/core'.

Why it has happened: because you used EventEmmiter before importing it, so in that case it automatically imports from 'protractor' module.

1
import { Component, Output } from '@angular/core';
import { slideToRight } from '../../../../router.animations';
import { Router, ActivatedRoute, UrlSegment } from '@angular/router';
import { EventEmitter } from 'protractor';

@Component({
  selector: 'app-new-user-input',
  templateUrl: './new-user-input.component.html',
  styleUrls: ['./new-user-input.component.css'],
  animations: [slideToRight()]
})
export class NewUserInputComponent {

  newUserInfoComplete = false;
  @Output() newUserInfoCompleteEvent = new EventEmitter <boolean> ();

  constructor(private router: Router, r: ActivatedRoute) {
    r.url.subscribe((s: UrlSegment[]) => {
      console.log("url", s);
    });
  }
  sendNewUserInfoComplete(){
    this.newUserInfoCompleteEvent.emit(!!this.newUserInfoComplete);
  }


  displaySibling() {
    console.log(this.router);
    this.router.navigate(['../', { outlets: { newuserorginfo: ['newuserorginfo'] } }])
  }

  closeBlade() {
    this.router.navigate([{ outlets: { newuserinput: null } }]);
  }

}

try this

2
  • when you assign a variable you dont have to set the type of data. TS automatically set it for you. and if you dont implement the Oninit delete it
    – ignacioSG
    May 23, 2018 at 18:23
  • Thank you so much for the 'try this' every little bit helps!! Didn't fix it but I found the problem bc of you none the less.... knew something looked funky May 23, 2018 at 18:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.