Lately, I've been delving into TypeScript through research and simple "hello world" projects. However, I've hit a roadblock when it comes to using System.js with TypeScript that I just can't seem to overcome. Most tutorials and demos online focus on Angular2, which I'm not quite ready to dive into yet.
For example, my project structure looks like this:
RootFolder
|
| _lib
| ...... ts (contains .ts files)
|
| components (contains compiled .js files)
| libraries
| ......... systemjs (housing system.js)
|
| index.html
| tsconfig.json
My tsconfig.json file is configured as follows:
{
"compileOnSave": true,
"compilerOptions": {
"noImplicitAny": true,
"noEmitOnError": true,
"removeComments": false,
"sourceMap": true,
"target": "es5",
"module": "system",
"moduleResolution": "node",
"outDir": "./components"
},
"exclude": [
"node_modules",
"wwwroot"
],
"include": [
"./_lib/ts/**/*"
]
}
The TypeScript compiling works smoothly without any issues. I have created a basic class called "Alerter" with the following code:
//alerter.ts
class Alerter {
showMessage(): void {
alert("Message displayed.");
}
}
export default Alerter
In addition, there's an app.ts (the main application file) containing:
//app.ts
import Alerter from "./alerter";
console.log("app.js included & executed");
function test() {
console.log("test called");
const alt = new Alerter();
alt.showMessage();
};
I've tried importing app.js using System.js in index.html and calling the "test" function from the console, but it doesn't seem to work. The initial console.log statement executes fine, but attempting to call test() from the Chrome console returns undefined.
Interestingly, if I remove the dependency on the "alerter" class from my main.ts, everything functions correctly. This is because the compiled app.js only consists of console.log calls and the function definition.
Here are my System.js calls in index.html:
System.config({
packages: {
"components": {
defaultExtension: "js"
}
}
});
System.import("components/app");
Feeling rather frustrated at this point, I'm considering reverting back to the simpler days of jQuery. It's frustrating how such a seemingly straightforward task is proving to be so challenging.