title: Observable.of is not a function with correct import
body: <p>I'm having a problem with the import of the "of" method for observable in angular 6, even with a fresh project install, all updated packages, I still get the error.
  So, i made a small project</p>
  
  <p>this is the service giving </p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { TableRow } from './table-row';
  import { Observable, of } from 'rxjs';
  
  @Injectable({
    providedIn: 'root'
  })
  export class TestTableService {
  
    private testData : TableRow[] = [
      {id:1, name:'pi', value:3.14},
      {id:2, name:'euler', value:2.71},
      {id:3, name:'Feigenbaum constant', value:2.50290},
      {id:4, name:'Mills constant', value:1.30637},
      {id:5, name:'one', value:1},
      {id:6, name:'square root of 2', value:1.41421}
    ];
  
    constructor() { }
  
    public getData() : Observable&lt;TableRow[]&gt;
    {
      return Observable.of(this.testData);
    }
  }
  </code></pre>
  
  <p>this is the component using it:</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { TestTableService } from './../test-table.service';
  import { TableRow } from './../table-row';
  
  @Component({
    selector: 'app-test-table',
    templateUrl: './test-table.component.html',
    styleUrls: ['./test-table.component.css']
  })
  export class TestTableComponent implements OnInit {
    tableData : TableRow[] = [];
  
    constructor(private testTable : TestTableService) { }
  
    ngOnInit() {
      this.testTable.getData()
        .subscribe(table =&gt; this.tableData = table);
    }
  
  }
  </code></pre>
  
  <p>Notice the imports are all the same as the other questions</p>
  
  <p><a href="https://i.stack.imgur.com/zXNWI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zXNWI.png" alt="the error I get"></a></p>
  
  <p>the projects package.json:</p>
  
  <pre><code>{
    "name": "angular-table-test",
    "version": "0.0.0",
    "scripts": {
      "ng": "ng",
      "start": "ng serve",
      "build": "ng build",
      "test": "ng test",
      "lint": "ng lint",
      "e2e": "ng e2e"
    },
    "private": true,
    "dependencies": {
      "@angular/animations": "^6.0.2",
      "@angular/cdk": "^6.1.0",
      "@angular/common": "^6.0.2",
      "@angular/compiler": "^6.0.2",
      "@angular/core": "^6.0.2",
      "@angular/forms": "^6.0.2",
      "@angular/http": "^6.0.2",
      "@angular/material": "^6.1.0",
      "@angular/platform-browser": "^6.0.2",
      "@angular/platform-browser-dynamic": "^6.0.2",
      "@angular/router": "^6.0.2",
      "core-js": "^2.5.4",
      "hammerjs": "^2.0.8",
      "rxjs": "^6.0.0",
      "zone.js": "^0.8.26"
    },
    "devDependencies": {
      "@angular/compiler-cli": "^6.0.2",
      "@angular-devkit/build-angular": "~0.6.3",
      "typescript": "~2.7.2",
      "@angular/cli": "~6.0.3",
      "@angular/language-service": "^6.0.2",
      "@types/jasmine": "~2.8.6",
      "@types/jasminewd2": "~2.0.3",
      "@types/node": "~8.9.4",
      "codelyzer": "~4.2.1",
      "jasmine-core": "~2.99.1",
      "jasmine-spec-reporter": "~4.2.1",
      "karma": "~1.7.1",
      "karma-chrome-launcher": "~2.2.0",
      "karma-coverage-istanbul-reporter": "~1.4.2",
      "karma-jasmine": "~1.1.1",
      "karma-jasmine-html-reporter": "^0.2.2",
      "protractor": "~5.3.0",
      "ts-node": "~5.0.1",
      "tslint": "~5.9.1"
    }
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/DoSL5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DoSL5.png" alt="the angular cli version output"></a></p>
  
  <p>what could be the problem?</p>