I am looking to transition my aging AngularJS application from JavaScript to TypeScript. To load the necessary components, I am currently utilizing require.js. In order to maintain compatibility with scripts that do not use require.js, I have opted for using umd as the module.
For instance, here are a couple of files:
customModule.ts
import angular = require('angular');
angular.module('customModule', []);
main.ts
import angular = require('angular');
import customModule = require('customModule');
angular
.module('app')
.factory('customFactory', ['customModule', class {
constructor(
private customModule
) { }
out() {
return this.customModule;
};
}]);
This code will be transformed into the following JavaScript:
customModule.js
(function (factory) {
if (typeof module === "object" && typeof module.exports === "object") {
var v = factory(require, exports);
if (v !== undefined) module.exports = v;
}
else if (typeof define === "function" && define.amd) {
define(["require", "exports", "angular"], factory);
}
})(function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var angular = require("angular");
angular.module('customModule', []);
});
main.ts
(function (factory) {
if (typeof module === "object" && typeof module.exports === "object") {
var v = factory(require, exports);
if (v !== undefined) module.exports = v;
}
else if (typeof define === "function" && define.amd) {
define(["require", "exports", "angular"], factory);
}
})(function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var angular = require("angular");
angular
.module('app')
.factory('customFactory', ['customModule', (function () {
function class_1(customModule) {
this.customModule = customModule;
}
class_1.prototype.out = function () {
return this.customModule;
};
;
return class_1;
}())]);
});
In the main.js, there is a
. However, I anticipate it should be define(["require", "exports", "angular"], factory);
.define(["require", "exports", "angular", "customModule"], factory);
If I change return this.customModule; in main.ts to return customModule;, then it exports correctly. Although, I begin to question the need for the constructor in that case - see the adjustments illustrated in the image removing the constructor as unnecessary.
https://i.stack.imgur.com/au4Sw.png
Once this issue is resolved, I can utilize my modules with TypeScript just like I did with JavaScript! <3