title: Error - TS2769: No overload matches this call. - On ngOnInit
body: <p>I am trying to connect an API to a front end. The following is my code:</p>
  <p>Task-view.component.ts</p>
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { TaskService } from 'src/app/task.service';
  import { ActivatedRoute, Params } from '@angular/router';
  
  @Component({
    selector: 'app-task-view',
    templateUrl: './task-view.component.html',
    styleUrls: ['./task-view.component.scss']
  })
  export class TaskViewComponent implements OnInit {
  
    lists!: any[];
    tasks!: any[];
  
    constructor(private taskService: TaskService, private route: ActivatedRoute) { }
    
  ngOnInit() {
        this.route.params.subscribe((params: Params) =&gt; {
         // console.log(params);
          this.taskService.getTasks(params.listId).subscribe((tasks: any[] ) =&gt; {
            this.tasks =tasks;
          })
  
        })
  
      this.taskService.getLists().subscribe((lists: any[]) =&gt; {
      this.lists=lists;
  
      })
    }
  }
  
   
  </code></pre>
  <p>Task-view.component.html</p>
  <pre><code>&lt;div class=&quot;centered-content&quot;&gt;
    &lt;div class=&quot;task-manager-container&quot;&gt;
  
      &lt;div class=&quot;sidebar has-background-white&quot;&gt;
        &lt;h1 class=&quot;title has-text-primary&quot;&gt;
          Lists
        &lt;/h1&gt;
  
        &lt;div class=&quot;list-menu&quot;&gt;
          &lt;a class=&quot;list-menu-item&quot; is-active&gt;
            &lt;p&gt; list #1&lt;/p&gt;
          &lt;/a&gt;
          &lt;a class=&quot;list-menu-item&quot; *ngFor=&quot;let list of lists&quot; [routerLink]=&quot;['/lists',list._id]&quot;
            routerLinkActive=&quot;is-active&quot;&gt;
            &lt;p&gt; {{list.title}}&lt;/p&gt;
          &lt;/a&gt;
        &lt;/div&gt;
  
  
        &lt;button class=&quot;button is-primary has-text-white&quot; routerLink=&quot;/new-list&quot;&gt;+ New List&lt;/button&gt;
  
      &lt;/div&gt;
  
      &lt;div class=&quot;task-list-container has-background-light&quot;&gt;
        &lt;h1 class=&quot;title has-text-primary&quot;&gt;
          Tasks
        &lt;/h1&gt;
  
        &lt;!-- Task Elements --&gt;
        &lt;div class=&quot;task&quot; class=&quot;task&quot; *ngfor=&quot;let task of tasks&quot;&gt;
          &lt;p&gt;{{task.title}}&lt;/p&gt;
          &lt;/a&gt;
        &lt;/div&gt;
  
  
      &lt;/div&gt;
    &lt;/div&gt;
   
  </code></pre>
  <p>After I type the ngOnInit from a tutorial my program broke:</p>
  <pre><code>ngOnInit() {
        this.route.params.subscribe((params: Params) =&gt; {
         // console.log(params);
          this.taskService.getTasks(params.listId).subscribe((tasks: any[] ) =&gt; {
            this.tasks =tasks;
          })
  
        })
  
      this.taskService.getLists().subscribe((lists: any[]) =&gt; {
      this.lists=lists;
  
      })
    }
  }
  </code></pre>
  <p>task.service.ts</p>
  <pre><code>import { Injectable } from '@angular/core';
  import { WebRequestService } from './web-request.service';
  //import { Task } from './models/task.model';
  
  @Injectable({
    providedIn: 'root'
  })
  export class TaskService {
  
    constructor(private webReqService: WebRequestService) { }
  
  
    getLists() {
      return this.webReqService.get('lists');
    }
  
    createList(title: string) {
      // We want to send a web request to create a list
      return this.webReqService.post('lists', { title });
    }
  
    getTasks(listId: string) {
      return this.webReqService.get(`lists/${listId}/tasks`);
    }
  
  }
  </code></pre>
  <p>web-request.service.ts</p>
  <pre><code>import { Injectable } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  
  @Injectable({
    providedIn: 'root'
  })
  export class WebRequestService {
  
    readonly ROOT_URL;
  
    constructor(private http: HttpClient) {
      this.ROOT_URL = 'http://localhost:3000';
    }
  
    get(uri: string) {
      return this.http.get(`${this.ROOT_URL}/${uri}`);
    }
  
    post(uri: string, payload: Object) {
      return this.http.post(`${this.ROOT_URL}/${uri}`, payload);
    }
  
    patch(uri: string, payload: Object) {
      return this.http.patch(`${this.ROOT_URL}/${uri}`, payload);
    }
  
    delete(uri: string) {
      return this.http.delete(`${this.ROOT_URL}/${uri}`);
    }
  }
  </code></pre>
  <p>This is the error I got. Any thoughts?</p>
  <blockquote>
  <p>Build at: 2020-12-01T03:14:29.853Z - Hash: 3639e8cffc68651ef24b -
  Time: 15491ms</p>
  <p>Error: src/app/pages/task-view/task-view.component.ts:24:60 - error
  TS2769: No overload matches this call.   Overload 1 of 5, '(observer?:
  NextObserver | ErrorObserver |
  CompletionObserver | undefined): Subscription', gave the
  following error.
  Argument of type '(tasks: any[]) =&gt; void' is not assignable to parameter of type 'NextObserver | ErrorObserver |
  CompletionObserver | undefined'.
  Property 'complete' is missing in type '(tasks: any[]) =&gt; void' but required in type 'CompletionObserver'.   Overload 2 of 5,
  '(next?: ((value: Object) =&gt; void) | undefined, error?: ((error: any)
  =&gt; void) | undefined, complete?: (() =&gt; void) | undefined): Subscription', gave the following error.
  Argument of type '(tasks: any[]) =&gt; void' is not assignable to parameter of type '(value: Object) =&gt; void'.
  Types of parameters 'tasks' and 'value' are incompatible.
  Type 'Object' is not assignable to type 'any[]'.
  The 'Object' type is assignable to very few other types. Did you mean to use the 'any' type instead?</p>
  <p>24         this.taskService.getTasks(params.listId).subscribe((tasks:
  any[] ) =&gt; {
  ~~~~~~~~~~~~~~~~~~~~</p>
  <p>node_modules/rxjs/internal/types.d.ts:64:5
  64     complete: () =&gt; void;
  ~~~~~~~~
  'complete' is declared here. src/app/pages/task-view/task-view.component.ts:30:43 - error TS2769:
  No overload matches this call.   Overload 1 of 5, '(observer?:
  NextObserver | ErrorObserver |
  CompletionObserver | undefined): Subscription', gave the
  following error.
  Argument of type '(lists: any[]) =&gt; void' is not assignable to parameter of type 'NextObserver | ErrorObserver |
  CompletionObserver | undefined'.
  Property 'complete' is missing in type '(lists: any[]) =&gt; void' but required in type 'CompletionObserver'.   Overload 2 of 5,
  '(next?: ((value: Object) =&gt; void) | undefined, error?: ((error: any)
  =&gt; void) | undefined, complete?: (() =&gt; void) | undefined): Subscription', gave the following error.
  Argument of type '(lists: any[]) =&gt; void' is not assignable to parameter of type '(value: Object) =&gt; void'.
  Types of parameters 'lists' and 'value' are incompatible.
  The 'Object' type is assignable to very few other types. Did you mean to use the 'any' type instead?
  Type 'Object' is missing the following properties from type 'any[]': length, pop, push, concat, and 26 more.</p>
  <p>30     this.taskService.getLists().subscribe((lists: any[]) =&gt; {
  ~~~~~~~~~~~~~~~~~~~</p>
  <p>node_modules/rxjs/internal/types.d.ts:64:5
  64     complete: () =&gt; void;
  ~~~~~~~~
  'complete' is declared here.</p>
  <p>** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **</p>
  </blockquote>