As I work on migrating my Javascript files to Typescript, I encountered an issue when trying to use the transpiled javascript file in an HTML page. The error message I received is as follows:
https://requirejs.org/docs/errors.html#notloaded
at makeError (require.min.js:1)
at Object.s [as require] (require.min.js:1)
at requirejs (require.min.js:1)
at helloworld.js:4
Below is my Typescript file:
import * as $ from "jquery";
export class Loading {
public showLoadingModal(msg?: string) {
if (msg === undefined) {
msg = "Loading ...";
}
$("#dialog1 label").html(msg);
}
public hideLoadingModal() {
}
public keepOpenLoadingModal() {
$("#dialog1").on("hide.bs.modal", function () {
return false;
});
this.showLoadingModal();
}
}
And here is the transpiled Javascript file:
"use strict";
exports.__esModule = true;
exports.Loading = void 0;
var $ = require("jquery");
var Loading = /** @class */ (function () {
function Loading() {
}
Loading.prototype.showLoadingModal = function (msg) {
if (msg === undefined) {
msg = "Loading ...";
}
$("#"dialog1 label").html(msg);
};
Loading.prototype.hideLoadingModal = function () {
};
Loading.prototype.keepOpenLoadingModal = function () {
$("#dialog1").on("hide.bs.modal", function () {
return false;
});
this.showLoadingModal();
};
return Loading;
}());
exports.Loading = Loading;
I have loaded jQuery from a CDN like so:
<html lang="en">
<head>
<meta charset="utf-8" />
...
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
...
I also tried loading JQuery using the code below but encountered issues:
<script>
var exports = {};
</script>
...