Rx/js help

Can someone please take a look at this and explain to me why the code works with the timeout observable return value and not the observal.of return value in the getCourses method.

https://plnkr.co/edit/91HdBT?p=preview
In this plnkr if you type something into the search box nothing happens but if you use the timeout return value and wait 5s it does work : /

 this.filteredCourses = <any>this.search.ionInput
        .debounceTime(400)
        .distinctUntilChanged()
        .flatMap((term:any) => Observable.of([{id:'abc'},{id:'bca'},{id:'cab'}]))//this.cSrv.searchCourses(term.target.value));
  getCourses(){
    //return Observable.timer(5000,0).first().map(v=>[{id:'abc'},{id:'bca'},{id:'cab'}]); //-- this works!
    return Observable.of([{id:'abc'},{id:'bca'},{id:'cab'}]);  //-- this doesn't!
  }

Thanks

Is it possible you forgot to import the of method?

import 'rxjs/add/observable/of';

Seems to work in the plunkr once added.

Yes, thanks I missed that one and can see the error in the console. This
did fix the plunker but unfortunately didn’t fix anything in my actual
project.

With or without the missing import in my project I don’t get an error even
though I can see the code is run when debugging in chrome. Any ideas why I
wouldn’t get an error locally?