TypeError when using code from Angular material autocomplete example

Question

When I try to use angular material autocomplete for adding tags, it crashes in the constructor with the error:

ERROR TypeError: You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.
    at Object.push../node_modules/rxjs/internal/util/subscribeTo.js.exports.subscribeTo (subscribeTo.js:42)
    at Object.subscribeToResult (subscribeToResult.js:7)
    at MergeMapSubscriber.push../node_modules/rxjs/internal/operators/mergeMap.js.MergeMapSubscriber._innerSub (mergeMap.js:132)
    at MergeMapSubscriber.push../node_modules/rxjs/internal/operators/mergeMap.js.MergeMapSubscriber._tryNext (mergeMap.js:129)
    at MergeMapSubscriber.push../node_modules/rxjs/internal/operators/mergeMap.js.MergeMapSubscriber._next (mergeMap.js:112)
    at MergeMapSubscriber.push../node_modules/rxjs/internal/Subscriber.js.Subscriber.next (Subscriber.js:103)
    at Observable._subscribe (subscribeToArray.js:9)
    at Observable.push../node_modules/rxjs/internal/Observable.js.Observable._trySubscribe (Observable.js:177)
    at Observable.push../node_modules/rxjs/internal/Observable.js.Observable.subscribe (Observable.js:162)
    at MergeMapOperator.push../node_modules/rxjs/internal/operators/mergeMap.js.MergeMapOperator.call (mergeMap.js:87)

My code is inspired from the material chips autocomplete example https://stackblitz.com/angular/qdxrokeqakb?file=app%2Fchips-autocomplete-example.ts :

Component snippet:

export class CreateNewPersonalBookmarkComponent implements OnInit {
  ...
  allTags = [
    'java',
    'javascript',
    'nodejs'
  ];

  tagCtrl = new FormControl();

  filteredTags: Observable<any[]>;

  @ViewChild('tagInput') tagInput: ElementRef;

  constructor(
    private personalBookmarksStore: PersonalBookmarksStore,
    private formBuilder: FormBuilder,
    private keycloakService: KeycloakService,
    private bookmarkService: PublicBookmarksService,
    private markdownServce: MarkdownService,
    private publicBookmarkStore: BookmarkStore
  ) {

    this.filteredTags = this.tagCtrl.valueChanges.pipe(
      startWith(null),
      map((tag: string | null) => tag ? this.filter(tag) : this.allTags.slice())
    );
  }

  filter(name: string) {
    return this.allTags.filter(tag => tag.toLowerCase().indexOf(name.toLowerCase()) === 0);
  }

  selected(event: MatAutocompleteSelectedEvent): void {
    const tags = this.bookmarkForm.get('tags') as FormArray;
    tags.push(this.formBuilder.control(event.option.viewValue));
    this.tagInput.nativeElement.value = '';
    this.tagCtrl.setValue(null);
  }

  ...
}

and html template:

<form [formGroup]="bookmarkForm" novalidate (ngSubmit)="saveBookmark(bookmarkForm.value)">
  .....
  <div id="tags">
    <mat-form-field  class="full-width">
      <mat-chip-list #chipList>
        <mat-chip *ngFor="let tag of tags.controls; let i = index;" [selectable]="selectable"
                  [removable]="removable" (removed)="remove(i)">
          {{tag.value}}
          <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
        </mat-chip>
        <input placeholder="Tags* - max 5, use comma, space or enter to separate..."
               #tagInput
               [matChipInputFor]="chipList"
               [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
               [matChipInputAddOnBlur]="addOnBlur"
               [matAutocomplete]="auto"
               pattern="^[-\w\s]+(?:,[-\w\s]*)*$"
               (matChipInputTokenEnd)="add($event)"
               formArrayName="tags"
               required
        />
      </mat-chip-list>
      <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
        <mat-option *ngFor="let tag of filteredTags | async" [value]="tag">
          {{ tag }}
        </mat-option>
      </mat-autocomplete>
    </mat-form-field>
  </div>
  ....
</form>

I can't figure out what is the problem...

Can you reproduce it on stackblitz instead of including link to the original example? — yurzui
error is because of your services would be good if you post your full code or where using service. — Fateme Fazli
It's kind of hard to reproduce on stackblitz, but here it is the component in the branch dealing with autocomplete: github.com/Codingpedia/codingmarks.org/tree/feature/… — ama

ama ama · Accepted Answer · 2018-06-30T09:37:16

It was the false import of rxjs operators:

import {Observable} from 'rxjs/index';
import {map, startWith} from 'rxjs/internal/operators';

Correct:

import {Observable} from 'rxjs';
import {map, startWith} from 'rxjs/operators';

TypeError when using code from Angular material autocomplete example

1 Answers