Angular 2 RC4 to latest - "Uncaught TypeError: Cannot read property 'prototype' of undefined" when extending

Question

我有一个较旧的 Angular 2 RC4 项目，我已经更新到最新版本（现在是 2.0.0）。当运行 ng build 使用 angular CLI 的最新版本 (1.0.0-beta.14) 时，我没有收到任何编译错误，但是当运行 ng serve 我得到标题中的错误。

有问题的基本服务如下所示：

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


export class PkServiceBaseService {
  // Implementation
}

虽然 class 扩展基础服务看起来像：

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
}

两个文件都在同一个目录下，通过index.ts文件导出。

奇怪的是，我在使用继承时在某些模型 classes 中遇到了同样的错误，但现在它消失了。

此外，错误的堆栈跟踪包含对另一个服务 UserService 的引用，该服务也扩展了 PkServiceBaseService，但根本没有在 TaskService.[=20 中使用=]

如果我能提供更多信息，请告诉我。我省略了实现细节，因为问题似乎只与继承有关，但我当然可以提供更多信息。

供参考的完整堆栈跟踪：

__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

编辑： 我应该补充一点，我已经按照 Angular CLI

的 the RC4 to RC5 migration steps for Angular 2, as well as the Upgrading from Beta.10 to Beta.14 个步骤进行操作

Answer 1

我也遇到了同样的情况。最后，我的代码中存在一些系统没有抱怨的循环依赖项，并且 webpack 抛出了误导性消息。

就我而言，我有一个共享模块和一个核心模块。我没有导入共享，而是将其分解为 shared/menu、shared/icon 等等。

这打破了所有奇怪的依赖关系并开始正常工作

Answer 2

经过大量挖掘和捏造，我终于能够让我的应用程序再次运行。

This issue 在 Angular CLI 队列中让我走上了正确的轨道。似乎有时在 index.ts 文件中使用通配符会导致在编译后发现 class 时出现问题。

例如，在我做类似的事情之前：

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

但将我的 index.ts 中的内容更改为：

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

解决了我的问题。

在一些情况下，我的模型也会出现同样的错误 classes。以前，当我必须在同一个文件夹中建模时，我可以这样做：

import { User } from "./";

将导入更改为：

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

消除了错误。

Answer 3

对我来说，index.ts 中的顺序很重要。将我的基础 class 放在第一位，然后错误就消失了。

Answer 4

我刚刚删除了 -

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

来自 index.ts 并将其导入我的基本模块。

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

这解决了我的问题。

Angular 2 RC4 to latest - "Uncaught TypeError: Cannot read property 'prototype' of undefined" when extending

Angular 2 RC4 to latest - "Uncaught TypeError: Cannot read property 'prototype' of undefined" when extending

angular-cli

angular