Currently, I am delving into the realm of Typescript and endeavoring to incorporate module loaders (system.js) into my workflow. However, I have encountered an error that seems quite elusive to resolve. Undoubtedly, there must be a misconfiguration on my part. Within my project, I have two files, one serving as the module that I intend to import. Despite various attempts at importing variables and classes, the persisting error remains. Should anyone possess insight on where my mistake lies, any guidance would be greatly appreciated.
https://i.sstatic.net/X9hKF.png
My project consists of two files in addition to an index.html and a tsconfig .json file
index.html
<html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.20.7/system.js"></script>
<script>
System.import('main').then(function(m) {console.log(m)});
</script>
</head>
<body>
</body>
</html>
main.ts
import {anotherName} from './test';
let name: string = "bob";
console.log(name);
console.log(anotherName);
test.ts
export let anotherName: string = "Jeff";
main.js
System.register(["./test"], function (exports_1, context_1) {
"use strict";
var __moduleName = context_1 && context_1.id;
var test_1, name;
return {
setters: [
function (test_1_1) {
test_1 = test_1_1;
}
],
execute: function () {
name = "bob";
console.log(name);
console.log(test_1.anotherName);
}
};
});
tsconfig.json
{
"compilerOptions": {
"target": "es5",
"module": "system",
"moduleResolution": "node",
"isolatedModules": false,
"jsx": "react",
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"declaration": false,
"noImplicitAny": false,
"noImplicitUseStrict": false,
"removeComments": true,
"noLib": false,
"preserveConstEnums": true,
"suppressImplicitAnyIndexErrors": true
},
"exclude": [
"node_modules",
"typings/browser",
"typings/browser.d.ts"
],
"compileOnSave": true,
"buildOnSave": false,
"atom": {
"rewriteTsconfig": false
}
}