title: Typescript error: Type Observable<Object> is not assignable to type
body: <p>I'm learning the MEAN stack and I'm stuck on a piece of code that used to work, but for reason today it seems to not want to work for me.</p>
  
  <p>I'm getting an error: "Type Observable is not assignable to type Observable. Did you mean to use the 'any' type instead?</p>
  
  <p>Here is the course.service.ts file where the error presents itself:</p>
  
  <pre><code>import { Injectable } from '@angular/core'; 
  import {Course} from './course'; 
  import {Observable} from 'rxjs/Observable'; 
  import {HttpClient} from '@angular/common/http';
  
      @Injectable() export class CourseService {
  
        constructor(private httpClient: HttpClient) { }
  
        readAll(): Observable&lt;Course[]&gt; {
          return this.httpClient
            .get('https://jsonplaceholder.typicode.com/posts');   }
  
      }
  </code></pre>
  
  <p>Here is course.component.ts:</p>
  
  <pre><code>import {Component, Input, OnInit} from '@angular/core';
  import {Course} from '../course';
  
  @Component({
    selector: 'app-course',
    templateUrl: './course.component.html',
    styleUrls: ['./course.component.css']
  })
  export class CourseComponent implements OnInit {
    @Input()
    course: Course;
  
    @Input()
      courseItemCss: string;
  
  
    constructor() { }
  
    ngOnInit() {
      if (!this.course) {
        this.course = &lt;Course&gt; {};
      }
  
    }
  
  }
  </code></pre>
  
  <p>Here is the interface course.ts:</p>
  
  <pre><code> export interface Course {
    id: string;
    title: string;
    description: string;
  }
  </code></pre>
  
  <p>course.component.ts:</p>
  
  <pre><code>import {Component, Input, OnInit} from '@angular/core';
  import {Course} from '../course';
  
  @Component({
    selector: 'app-course',
    templateUrl: './course.component.html',
    styleUrls: ['./course.component.css']
  })
  export class CourseComponent implements OnInit {
    @Input()
    course: Course;
  
    @Input()
      courseItemCss: string;
  
  
    constructor() { }
  
    ngOnInit() {
      if (!this.course) {
        this.course = &lt;Course&gt; {};
      }
  
    }
  
  }
  </code></pre>
  
  <p>course.manager.component.ts:</p>
  
  <pre><code>import {Component, OnDestroy, OnInit} from '@angular/core';
  import {Subscription} from 'rxjs/Subscription';
  import {CourseService} from '../course.service';
  import {Course} from '../course';
  
  
  @Component({
    selector: 'app-course-manager',
    templateUrl: './course-manager.component.html',
    styleUrls: ['./course-manager.component.css']
  })
  export class CourseManagerComponent implements OnInit, OnDestroy {
    courses: Array&lt;Course&gt;;
    courseServiceSub: Subscription;
  
    constructor(private courseService: CourseService) {
      this.courses = [];
    }
  
    ngOnInit() {
      this.courseServiceSub = this.courseService.readAll().subscribe(courses =&gt; {
        this.courses = courses;
      });
    }
  
    ngOnDestroy() {
      if (this.courseServiceSub) { // if subscription exists, unsubscribe from it.
        this.courseServiceSub.unsubscribe(); // make sure to unsubscribe or may cause memory leaks which makes app slower.
      }
    }
  }
  </code></pre>
  
  <p>I know it's something simple but I can't figure it out right now.
  Any advice would help.
  thanks!</p>
  
  <p>~jb</p>