Recently, I started using requireJs and I'm facing a challenge. I want to load a viewmodel from my main script, App.ts, and retrieve a new instance of my viewModel: LienPdtUfActVM.ts.
This is how my App.ts file looks like:
declare var jQuery: JQueryStatic;
declare var $test: any;
(function ($, $test) {
if (typeof ($test.module.Livret) == 'object') {
return;
}
$easily.module.Livret = {
init: function (data) {
var LienPdtUfAct = require(["./Livret/ViewModel/LienPdtUfActVM"]);
??????
},
destroy: function (applicationId) {
}
};
})(jQuery, $test);
Here's how my LienPdtUfActVM.ts file is structured :
export class LienPdtUfActVM {
constructor() {
}
}
I am struggling to figure out how to create a new instance of this class.
Also, here is my tsconfig.json configuration :
{
"compilerOptions": {
"noImplicitAny": false,
"noEmitOnError": true,
"removeComments": false,
"sourceMap": true,
"target": "es2015",
"module": "amd"
},
"compileOnSave": true
}
Solution Attempt :
I attempted the following approach:
import LienPdtUfAct = require('./Livret/ViewModel/LienPdtUfActVM');
....
new LienPdtUfAct.LienPdtUfActVM();
Although TypeScript compiler did not raise any issues, upon execution, I encountered an error message stating "Uncaught Error: Mismatched anonymous define() module: function (require, exports, LienPdtUfAct) {…". It seems that the LienPdtUfActVM.js file was not loaded properly.