加载使用 SystemJS 扩展其他类的类

Loading classes that extends other with SystemJS

本文关键字：其他 扩展 SystemJS 加载      更新时间：2023-09-26

我的 Angular2 应用程序中有两个类，其中一个扩展另一个，如下所示，文件中的第一个 course.ts（加载时为 js）

export class Course {
    id:string;
}

第二个在schoolCourse.ts（加载时js） 

import {Course} from "./course";
export class SchoolCourse extends Course {
    code:string;
}

要在浏览器中加载应用程序，请使用以下 SystemJs 代码

 <script>
  System.config({
    packages: {
      app: {
        format: 'register',
        defaultExtension: 'js'
      }
    }
  });
  System.import('app/app/boot')
        .then(null, console.error.bind(console));
</script>

当我将学校课程类作为扩展类加载应用程序时，出现错误

类扩展值未定义不是函数或空

值

从 Angular2-polyfill 发射.js

展开并查看它来自的堆栈跟踪

加载 http://localhost:3000/app/app/boot.js 时出错 执行时 （http://localhost:3000/app/courses/schoolCourse.js:15:48）

引用的那行是js中说SchoolCourse扩展课程的行。

对我来说，这听起来像是在 SchoolCourse 课程之前加载课程的问题，但我可以完全做到，而且我不像 SystemJ 那样聪明。

有人知道我如何解决这个问题吗？

您的SchoolCourse类import Course类吗？

import {Course} from './path/to/course';
export class SchoolCourse extends Course {
    code: string;
}

import行应向 SystemJS 指示必须在SchoolCourse之前加载Course。

要检查的另一件事 - 在浏览器的开发工具中，打开"网络"选项卡并在应用程序加载时观察流量。 在呼叫schoolCourse.js之前是否会拨打course.js？

事实证明，这是一个

根本不是 SystemJs 的问题，或者我认为不仅仅是愚蠢的问题，开发团队没有在课程类和 SchoolCourse 类中观察到用户或相同的函数名称。修复后，一切正常。

所以，扩散错误，愚蠢的错误。至少也许这有助于其他人度过糟糕的一天......

在使用扩展 SchoolCourse 之前，您忘记导入课程类：

import {Course} from './course';
export class SchoolCourse extends Course {
  (...)
}

消息中可能打扰您的是需要函数。事实上，虽然 TypeScript 和 ES6 中有一个 class 关键字，但类在底层对应于 JavaScript 构造函数。这就是函数在运行时需要扩展的原因。

在不导入中，不会加载相应的模块（在浏览器中 devtools 的"网络"选项卡中看不到对 http://localhost:3000/app/courses/course.js 的调用），并且 Course 保持未定义状态。

相关文章：