TypeScript 导出和导入 尚未加载上下文的模块名称:_。使用 require([])

2023-12-09

当我尝试在浏览器中运行应用程序时,我在调试控制台窗口中收到以下消息:

Module name "Person" has not been loaded yet for context: _. Use require([])

当然,如果合并 .ts 文件的内容,一切都会正常工作。

我创建了Person.ts file:

export interface IPerson {
    firstName: string;
    lastName: string;
}

export class Person implements IPerson {
    private _middleName: string;
    public set middleName(value: string) {
        if (value.length <= 0)
            throw "Must supply person name";
        this._middleName = value;
    }
    public get middleName(): string {
        return this._middleName;
    }

    constructor(public firstName: string, public lastName: string) { };
    Validate() {
        alert('test');
    }
}

and the app.ts file:

import {Person} from "./Person"

class Employee extends Person {
    Validate() {
        alert('new test inside Employee');
    }
}

let p1 = new Person("Shahar", "Eldad");
p1.Validate();
try {
    p1.middleName = "";
}
catch (err) {
    alert(err);
}

let p2 = new Employee("Shahar", "Eldad");
p2.Validate();

document.body.innerHTML = p1.firstName + " " + p2.lastName;

最后我的index.html file:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="windows-1255">
        <title>Insert title here</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.2/require.min.js" data-main="app.js"></script>
    </head>
    <body>

    </body>
</html>

最后我的tsconfig.json file:

{
    "compilerOptions": {
        "module": "commonjs",
        "noImplicitAny": true,
        "removeComments": true,
        "preserveConstEnums": true,
        "sourceMap": true,
        "target": "es6"
    },
    "files": [
        "app.ts",
        "Person.ts"
    ]
}

我首先尝试使用目标 es5 进行转译,然后移至 es6(最后移至 tsconfig.json 文件)

Update

我确实喜欢@Louis,它似乎有效 - 复制了我的问题中的所有文件,并且只编辑了 tsconfig.json 以保存 amd 和 es5。我看不出复制前和复制后有什么区别。诡异的。


Using "module": "commonjs"当你希望 TypeScript 编译器的输出由 RequireJS 加载时,绝对是错误的。你应该使用"module": "amd"。 (您可能需要将目标更改回es5 too.)

你得到的错误是因为"module": "commonjs",编译器将为您输出类似的代码import {Person} from "./Person":

var _Person = require("./Person");
var Person = _Person.Person;

致电给require将导致 RequireJS 执行,但会失败,因为 RequireJS 不直接支持此类代码。如果上面的代码位于define像这样:

define(function (require) {
    var _Person = require("./Person");
    var Person = _Person.Person;

    // Rest of the module.
});

当你使用"module": "amd",编译器生成类似于此代码片段的代码并且它可以工作。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

TypeScript 导出和导入 尚未加载上下文的模块名称:_。使用 require([]) 的相关文章

  • 如何用js获取一个月的4个星期一?

    我正在构建一个图表 其中 x 轴应该是一个月的四个星期 我只想显示该月的四个星期一 我已经有了currentMonth和currentYear变量 而且我知道如何获取该月的第一天 我所需要的只是将一个月的四个星期一放入数组中 所有这些都在同
  • 在 Javascript 中,有什么方法可以知道从哪个主机脚本加载?

    在javascript中 作为从某个主机加载的脚本 有什么方法可以知道我是从哪个服务器 主机加载的 我需要向该主机发出额外的 ajax 请求 并且更愿意动态地找出主机 因此 如果您在页面上包含 javascript 文件 当该 javasc
  • 如何删除事件监听器?

    下面是我的事件监听器代码 window addEventListener beforeunload function e if sessionStorage token abide call api 如果我想删除这个事件监听器 我该怎么办
  • moment.calendar() 没有时间

    我想使用不带时间的 moment calendar 选项 所以而不是 上周二下午 5 点 我想要 上周二 有人知道 Moment 现在是否有解决方案吗 我找到了这个小提琴http jsfiddle net nawxZ http jsfidd
  • 使用 createReducer 函数时构建用于生产的 Angular+ngrx 8 时出错

    目前我正在尝试使用新的 NgRX 构建 Angular NgRX 8 应用程序creator功能 但是当我构建这个用于生产时 出现以下错误 装饰器中不支持函数调用 但在 reducers 中调用了 createReducer 在开发模式下完
  • jqgrid 在编辑框中选择不正确的下拉选项值

    我正在使用表单编辑 表单中有两个选择框 一个选择框是国家 地区 另一个选择框是州 州选择框取决于所选的国家 地区 并将动态填充 例如 Country 美国 期权价值 1 英国 期权价值 2 美国的状态 阿拉巴马州 选项值 1 加利福尼亚州
  • 如何检测不渲染 .png 透明的浏览器

    我有这段代码可以根据一周中的某一天渲染图像 但在 IE6 及更低版本以及可能其他一些浏览器中 它不会呈现 png 不透明度 所以我想稍微改变一下 这样它就会检测到不渲染 alpha 透明度的浏览器 并告诉他们加载这个图像 img horar
  • JavaScript 逻辑赋值是如何工作的?

    在 javascript 中 如果我们有一些代码 例如 var a one var b q a alert b 逻辑 OR 运算符会将 a 的值分配给 b 并且警报将为 一 这仅限于作业还是我们可以在任何地方使用它 似乎空字符串被视为与未定
  • Backbone.js 与 Google 地图 - 有关此问题和侦听器的问题

    我有一个为 Google Maps v3 创建的模块 我正在尝试将其转换为 Backbone js 视图构造函数 到目前为止 这是我的视图模块 我将解释代码后遇到的问题 pg views CreateMap Backbone View ex
  • 无法从 Twin.macro 中的 Prop 获取值

    您可以在这里查看我正在尝试执行的操作的示例 https codesandbox io s vibrant leaf qj8vz https codesandbox io s vibrant leaf qj8vz 注意 这个特定的例子使用双宏
  • 从 url 角度加载模板并在 div 内编译

    由于我是 Angular JS 的新手 我想知道如何加载外部模板并将其与一些数据一起编译到目标中div 例如我有这个模板
  • 如何按值删除数组中的多个项目?

    我正在尝试做一个removeAll 函数 它将删除具有该特定值 而不是索引 的数组的所有元素 当我们对循环进行任何更改时 棘手的部分就出现了 索引往往会移动 使其很难像我们想要的那样工作 并且每次更改时都重新启动循环 这在大数组上效率非常低
  • Material.Angular.io mat-autocomplete [displayWith] 函数更新范围变量

    我遇到了一个问题 我可以在实例化 mat autocomplete 的组件控制器中访问本地声明的变量 我面临的问题是局部变量被困在这个范围内 我无法更新它们 有关更新 mat autocomplete 范围变量的任何想法或想法 最终我要做的
  • 两个日期之间间隔 15 分钟 javascript

    问题 我需要将两个日期 时间戳之间的所有 15 分钟时隙 日期格式 2016 08 10 16 00 00 创建为 HH mm 格式的数组 其中分钟限制为 00 15 30 45 示例 中午 12 30 到下午 2 30 将 gt 12 3
  • 是否可以让 webpacks System.import 使用 ajax (用于进度事件)?

    所以我刚刚更新到 webpack 2 并进行了第一个工作设置 其中 webpack 通过查看 System import 调用自动创建块 相当甜蜜 但是 我使用 ajax 调用加载初始块 以便我可以加载时显示进度 https stackov
  • 如何在 WebView 中添加 JavaScript 函数并稍后在提交 reCAPTCHA 时从 HTML 调用它

    我在 WebView 中添加一个 JavaScript 函数 如下所示 Kotlin val webView findViewById R id webview as WebView webView getSettings setJavaS
  • 如何将命名空间与 TypeScript 外部模块一起使用?

    我有一些代码 基本类型 ts export namespace Living Things export class Animal move export class Plant photosynthesize dog ts import
  • 将 javascript 变量作为参数传递给 @url.Action()

    是否可以将javascript变量作为参数传递给 url Action 因为据我所知可能存在服务器和客户端问题 我的要求是我必须根据过滤器下载文件 并进行ajax调用不适用于下载文件 所以我对 url Action 进行了编码 但无法实现这
  • 将一维数组转换为二维数组[重复]

    这个问题在这里已经有答案了 我正在开发一个程序 我必须将文本文件中的值读入一维数组 我已经成功获取该一维数组中的数字 m1 1 2 3 4 5 6 7 8 9 但我希望数组是 m1 1 2 3 4 5 6 7 8 9 您可以使用此代码 co
  • 角度 2 ngIf 与可观察?

    我有一个非常简单的服务 它的工作是从 api authenticate url 获取 200 或 401 auth service ts Injectable export class AuthService constructor pri

随机推荐