For some reason, I find myself in a situation where I need to compile one file (main entry point), which depends on multiple other modules in other files, into a single-bundle-file. It must be able to run in the browser.
I must use the TypeScript compiler, and only that tool (i.e. not Webpack, Babel, etc.).
I am currently compiling using the --outFile option with --module set to either System or AMD (which are the only ones allowed for --outFile).
For System, something along the lines of the following gets generated:
[some more modules ...]
System.register("index", [...], function (exports, context) {
[...]
});
When I try to stick this in an HTML file like this:
<!doctype html>
<html>
<head>
<title></title>
<meta content="">
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/6.1.7/system.js"></script>
</head>
<body>
<script>
[some more modules ...]
System.register("index", [...], function (exports, context) {
[...]
});
System.import("index").then(function (m) {
new m.run();
});
</script>
</body>
</html>
I get:
Error: Unable to resolve specifier 'index' from [...]
What am I doing wrong with System? Also, which is better for my purpose? AMD or System?