bier hier bier hier - 6 months ago 36
AngularJS Question

Angular 2: how to fix 'cannot read property "lastIndexOf"?

Trying to get my head around angular 2 and created a plunker which injects a service:

import {Injectable} from 'angular2/core';
import {URLSearchParams, Jsonp,Http} from 'angular2/http';

@Injectable()
export class WikipediaService {
constructor(private jsonp: Jsonp) {}

search (term: string) {
var search = new URLSearchParams()
search.set('action', 'opensearch');
search.set('search', term);
search.set('format', 'json');
return this.jsonp
.get('http://en.wikipedia.org/w/api.php?callback=JSONP_CALLBACK', { search })
.map((request) => request.json()[1]);
}
}


This service is being used in another class called FriendsList:

import {Component,View,CORE_DIRECTIVES} from 'angular2/core';
import {Http, Response,HTTP_PROVIDERS} from 'angular2/http';
import 'rxjs/Rx';
import {WikipediaService} from 'src/service',
import {Control} from 'angular2/common';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/operator/switchMap';
import {Observable} from 'rxjs/Observable';


@Component({
template: `
<h1>artists</h1>
<div>
<h2>Wikipedia Search</h2>
<input type="text" [ngFormControl]="term"/>
<ul>
<li *ngFor="#item of items | async">{{item}}</li>
</ul>
</div>
`,
directive:[CORE_DIRECTIVES]
})

export class FriendsList{
items: Observable<Array<string>>;
term = new Control();

constructor(private wikipediaService: WikipediaService) {
this.items = this.term.valueChanges
.debounceTime(400)
.distinctUntilChanged()
.switchMap(term => this.wikipediaService.search(term));
}

}


The error in the console is like this, how can I fix this? :

Error: Cannot read property 'lastIndexOf' of undefined
Error loading http://run.plnkr.co/fGkpQYXMc0eGUy6e/src/myfriends.ts as "src/myfriends" from http://run.plnkr.co/fGkpQYXMc0eGUy6e/src/boot.ts
at l.k (https://rawgit.com/systemjs/systemjs/0.19.6/dist/system.js:4:3324)
at l.normalize (https://rawgit.com/systemjs/systemjs/0.19.6/dist/system.js:5:16628)
at l.<anonymous> (https://rawgit.com/systemjs/systemjs/0.19.6/dist/system.js:5:3042)
at l.<anonymous> (https://rawgit.com/systemjs/systemjs/0.19.6/dist/system.js:5:6587)
at l.<anonymous> (https://rawgit.com/systemjs/systemjs/0.19.6/dist/system.js:5:10222)
at l.<anonymous> (https://rawgit.com/systemjs/systemjs/0.19.6/dist/system.js:5:14003)
at l.instantiate (https://rawgit.com/systemjs/systemjs/0.19.6/dist/system.js:5:16398)
at https://rawgit.com/systemjs/systemjs/0.19.6/dist/system.js:4:5994
at Zone.run (https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.0/angular2-polyfills.js:138:17)
at zoneBoundFn (https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.0/angular2-polyfills.js:111:19)


plunkr:http://plnkr.co/edit/FeG9pauPJcVuwQv3cm6x?p=preview

Answer

You have a typo in your myfriends.ts file:

import {WikipediaService} from 'src/service',

You need to use ; instead of , like this:

import {WikipediaService} from 'src/service';
Comments