CODEWITHSUNDEEP
typescriptangular
Dblock247
Dblock247

Reputation: 6725

Angular 2 Error

I am having a Angular 2 error and it seems to be very difficult to find where the error resides. The error does not get detected during compile time but yet the browser presents it when trying to load up the page.

angular2-polyfills.js:349 Error: TypeError: Cannot read property 'prototype' of undefined
        at __extends (http://localhost:3000/app/repository/award/award.service.js:7:72)
        at eval (http://localhost:3000/app/repository/award/award.service.js:36:17)
        at execute (http://localhost:3000/app/repository/award/award.service.js:47:14)
    Error loading http://localhost:3000/app/main.js

Can anyone point me in the right direction?

app/main.ts:

 ///<reference path="../../../node_modules/angular2/typings/browser.d.ts"/>
import {bootstrap} from 'angular2/platform/browser';
import {HTTP_PROVIDERS} from 'angular2/http';
import {ROUTER_PROVIDERS} from 'angular2/router';
import {AppComponent} from './app.component';

bootstrap(AppComponent, [HTTP_PROVIDERS, ROUTER_PROVIDERS])
  .then(success => console.log(`Bootstrap success`))
  .catch(error => console.log(error));

repository:

import { Http, Response, Headers } from 'angular2/http';
import { Injectable } from 'angular2/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/concatMap';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/catch';
// import { CONFIG } from '../shared/config';
import { IEntity } from './ientity';

@Injectable()
export abstract class Repository<T extends IEntity>
{
  protected url = null;

  constructor(protected _http: Http) {}

  add(entity: T) {
    let headers = new Headers();
    let body = {
      name: entity.name
    };

    headers.append('Authorization', 'Basic');

    return this._http
      .post(`${this.url}`, JSON.stringify(body), {
        headers: headers
      })
      .map(res => res.json())
      .catch(this.handleError);
  }

  delete(entity: T) {
    let headers = new Headers();
    headers.append('Authorization', 'Basic');

    return this._http
      .delete(`${this.url}/${entity.id}`, {
        headers: headers
      })
      .catch(this.handleError);
  }

  list() {
    let headers = new Headers();
    headers.append('Authorization', 'Basic');

    return this._http.get(`${this.url}`, {
      headers: headers
    })
      .map((response: Response) =>
        <T[]>response.json().data
      )
      // .do(items => console.log(items))
      .catch(this.handleError);
  }

  get(id: number) {
    let headers = new Headers();
    headers.append('Authorization', 'Basic');

    return this._http.get(`${this.url}/${id}`, {
      headers: headers
    })
      .map((response: Response) => <T>response.json())
      .catch(this.handleError);
  }


  update(entity: T) {
    let headers = new Headers();

    let body = {
      name: entity.name
    };

    headers.append('Authorization', 'Basic');

    return this._http
      .put(`${this.url}/${entity.id}`, JSON.stringify(body), {
        headers: headers
      })
      .map(res => res.json())
      // .do(res => console.log(body))
      .catch(this.handleError);
  }

  private handleError(error: Response) {
    console.error(error);
    return Observable.throw(error.json().error || 'Server error');
  }
}

award.service:

import { Http } from 'angular2/http';
import { Injectable } from 'angular2/core';
import { CONFIG } from '../shared/config';
import { Repository } from '../core';
import { IAward } from './iaward';

@Injectable()
export class AwardService extends Repository<IAward>
{
  protected url = CONFIG.baseUrls.awards;

  constructor(protected _http: Http) {
    super(_http);
  }
}

Upvotes: 3

Views: 899

Answers (1)

James
James

Reputation: 2841

I reproduced this by adding the following to my project: 

export class Subclass extends Base {}
class Base {}

And then worked around the error by defining the base class first:

class Base {}
export class Subclass extends Base {}

Example: http://plnkr.co/edit/ge5gfckgXMp5ylUhKOEn - move the base class to be defined first, and no error. Seems like it might be related - but I am unable to reproduce in the multiple file scenario.

Upvotes: 4

Related Questions