tsconfig module options - does 'System' refer to SystemJS?

Question

In a tsconfig.json file, the following option can be specified as the value of the compilerOptions 'module' property:

System

So that we get:

{
  "compilerOptions": {
    "module": "System",
     ...

Does System refer to SystemJS (i.e. if SystemJS is being used as the module loader do I always need 'System' in my tsconfig.json when I'm creating an AngularJS or Angular app)? The documentation doesn't appear to explain this:

https://www.typescriptlang.org/docs/handbook/compiler-options.html

In Visual Studio project configuration for TypeScript there's also a 'System' option under 'TypeScript Build > Module system', which will obviously be referring to the same thing as the 'System' in the tsconfig.json.

Greg Rozmarynowycz Greg Rozmarynowycz · Accepted Answer · 2018-01-08T00:31:26

Yes it Refers to SystemJS, and including it explicitly is important if you want the TypeScript compiler to behave as you expect and generate the code you expect. If you don't specify, TypeScript will revert to generating (and expecting) code based off of the current target ES version (by default ES3, triggering commonjs modules). As noted in the compiler docs it will have an affect on other default compiler options like moduleResolution and allowSyntheticDefaultImports.

For example, if you have a typescript file as follows

import { functionA } from './moduleA';
functionA();

If you specify module as system your generated code will used System calls:

System.register(["./moduleA"], function (exports_1, context_1) {
    "use strict";
    var __moduleName = context_1 && context_1.id;
    var moduleA_1;
    return {
        setters: [
            function (moduleA_1_1) {
                moduleA_1 = moduleA_1_1;
            }
        ],
        execute: function () {
            moduleA_1.functionA('Stuff');
        }
    };
});

However, if you allow the compiler to default to commonjs, it will generate:

"use strict";
var moduleA_1 = require('./moduleA');
moduleA_1.functionA('Stuff');

Note the generated code may vary based on TS version or other flags.

From testing/experience and the module resolution and compiler docs you linked.

tsconfig module options - does 'System' refer to SystemJS?

1 Answers