Angular 2 RC4 to the latter - "Uncaught TypeError: unable to read the 'prototype' of undefined property" on extension

Question

I had an older Angular 2 RC4 project, which I updated to the latest version (now 2.0.0). I do not get compilation errors when starting ng buildusing the latest version (1.0.0-beta.14) of the Angular CLI, but when ng serveI start, I get an error in the header.

The main service in question is as follows:

import { Injectable } from '@angular/core';
import { Response } from "@angular/http";
import { Observable } from "rxjs/Observable";


export class PkServiceBaseService {
  // Implementation
}

So far, the class extending the basic service is as follows:

import { Injectable } from '@angular/core';
import { Http, Response, Headers } from '@angular/http';
import { Observable } from "rxjs/Observable";


import { PkServiceBaseService } from "./";
import { JwtAuthorizationService } from "./";
import { Task } from "../shared";

@Injectable()
export class TaskService extends PkServiceBaseService {
  // Implementation
}

Both files are in the same directory and exported through the file index.ts.

The strange thing: I was getting the same error in some model classes when using inheritance, but now it has disappeared.

, UserService, PkServiceBaseService, TaskService.

, , . , , , , , , .

:

__extends              @   task.service.ts:40
(anonymous function)   @   user.service.ts:11
(anonymous function)   @   user.service.ts:105
__webpack_require__    @   bootstrap 32723c5…:52
(anonymous function)   @   main.bundle.js:4803
__webpack_require__    @   bootstrap 32723c5…:52
(anonymous function)   @   prep-kids.component.ts:18
__webpack_require__    @   bootstrap 32723c5…:52
(anonymous function)   @   icon-registry.js:375
__webpack_require__    @   bootstrap 32723c5…:52
(anonymous function)   @   src async:7
__webpack_require__    @   bootstrap 32723c5…:52
(anonymous function)   @   main.bundle.js:81928
__webpack_require__    @   bootstrap 32723c5…:52
webpackJsonpCallback   @   bootstrap 32723c5…:23
(anonymous function)   @   main.bundle.js:1

Edit: , RC4-RC5 Angular 2, Beta.10 Beta.14 Angular CLI

Answer 1

.

Angular CLI . , index.ts .

, - :

export * from "./user.service";
export * from "./pk-base-service.service";

index.ts to:

export {UserService} from "./user.service";
export {PkBaseService} from "./pk-base-service.service";

.

, . , , :

import { User } from "./";

:

import { User } from "./user.model";

.

Answer 2

. , , webpack .

. , shared, shared/menu, shared/icon ..

Answer 3

For me it was an order in index.ts, which was important. Put my base class first, and then the error goes away.

Answer 4

I just deleted -

export * from 'path/base-class-name';

from index.tsand imported it into my base module.

import { BaseClass } from 'path/base-class-name';

This solved my problem.