Angular 2 EXCEPTION: TypeError: Unable to read property '0' from indefinite

advertisements

I just follow the tutorial of using InMemoryBackendService to mock server. However, I got this error and don't know why.

This is '/app/job/job-page.ts'

import {Component, ViewEncapsulation} from '@angular/core';
import {ROUTER_DIRECTIVES} from '@angular/router-deprecated';
import {JobService} from './job-service';
import {Job} from './model/job';

@Component({
  directives: [
    ROUTER_DIRECTIVES,
  ],
  selector: '[job-page]',
  host: {
    class: 'job-page app'
  },
  template: require('./job-page.html'),
  encapsulation: ViewEncapsulation.None,
  styles: [require('./job-page.scss'), require('./login-page.scss')],
  providers: [JobService]
})

export class JobPage {

  public job: Job;
  constructor(private jobService: JobService){}

  ngOnInit(){
    this.getJob();
  }

  getJob(){
    this.jobService.getJob().then((job) => {
      this.job = job;
      console.log(job);
    })
  }
}

This is file '/app/job-service.ts'

import { Injectable } from '@angular/core';
import { Job } from '../job-list-page/job';

import { Http } from '@angular/http';
import 'rxjs/add/operator/toPromise';

@Injectable()
export class JobService{

    private jobUrl = './app/job-page/job';

    constructor(private http: Http){}

    getJob(): Promise<Job> {
        return this.http.get(this.jobUrl)
                        .toPromise()
                        .then((response) => response.json().data)
                        .catch(this.handleError);
    }

    private handleError(error: any) {
      return Promise.reject(error.message || error);
    }
}

This is file 'app/job-page/job-data.ts'

export class JobData {
  createDb() {
    let job = [
      { id: '1', name: 'Windstorm' },
      { id: '2', name: 'Bombasto' },
      { id: '3', name: 'Magneta' },
      { id: '4', name: 'Tornado' }
    ];
    return {job};
  }
}

This is the console.log:

EXCEPTION: TypeError: Cannot read property '0' of undefined
browser_adapter.ts:78EXCEPTION: TypeError: Cannot read property '0' of undefinedBrowserDomAdapter.logError @ browser_adapter.ts:78
browser_adapter.ts:78STACKTRACE:BrowserDomAdapter.logError @ browser_adapter.ts:78
browser_adapter.ts:78TypeError: Cannot read property '0' of undefined
    at InMemoryBackendService.parseId (http://localhost:3000/main.bundle.js:146311:37)
    at InMemoryBackendService.handleRequest (http://localhost:3000/main.bundle.js:146137:23)
    at InMemoryBackendService.createConnection (http://localhost:3000/main.bundle.js:146095:25)
    at httpRequest (http://localhost:3000/main.bundle.js:78654:21)
    at Http.get (http://localhost:3000/main.bundle.js:78703:17)
    at JobService.getJob (http://localhost:3000/main.bundle.js:211008:27)
    at JobPage.getJob (http://localhost:3000/main.bundle.js:210956:26)

I think my codes are right. I follow the tutorial step by step. Just don't know what is the problems of my code.


Very likely, you are using result of JobService.getJob() before the Promise has been resolved.

The code of the template is missing from your question, but I'm guessing, you access non-existing element in template