Are the module options in tsconfig referring to the 'SystemJS' module loader system?

Question

Are the module options in tsconfig referring to the 'SystemJS' module loader system?

When configuring a tsconfig.json file, one option that can be entered as the value for the compilerOptions 'module' property is:

System

This results in the following format:

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

Is the 'System' referring to SystemJS (meaning if SystemJS is used as the module loader, 'System' always needs to be included in tsconfig.json when creating an AngularJS or Angular app)? The documentation does not clearly address this:

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

In Visual Studio project configurations for TypeScript, there is also a 'System' option found under 'TypeScript Build > Module system'. This likely corresponds to the same concept as the 'System' specified in the tsconfig.json.

angularjs angular typescript module

Answer 1

Answer №1

In relation to SystemJS, it is crucial to include it explicitly to ensure that the TypeScript compiler behaves according to your expectations and generates the desired code. Failure to specify may lead TypeScript to default to generating code based on the current ES version (typically ES3) and using commonjs modules. This also impacts other default compiler options such as moduleResolution and allowSyntheticDefaultImports.

For instance, consider a TypeScript file with the following content:

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

If you define module as system, the generated code will utilize 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, letting the compiler default to commonjs will result in the following code:

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

It's important to note that the specific code generated may vary depending on the TypeScript version or other set flags.

This information is gleaned from personal testing/experience and consulting the links provided in the documentation on module resolution and compiler options.

Answer 2

In relation to SystemJS, it is crucial to include it explicitly to ensure that the TypeScript compiler behaves according to your expectations and generates the desired code. Failure to specify may lead TypeScript to default to generating code based on the current ES version (typically ES3) and using commonjs modules. This also impacts other default compiler options such as moduleResolution and allowSyntheticDefaultImports.

For instance, consider a TypeScript file with the following content:

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

If you define module as system, the generated code will utilize 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, letting the compiler default to commonjs will result in the following code:

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

It's important to note that the specific code generated may vary depending on the TypeScript version or other set flags.

This information is gleaned from personal testing/experience and consulting the links provided in the documentation on module resolution and compiler options.

Are the module options in tsconfig referring to the 'SystemJS' module loader system?

Answer №1

Similar questions

Tips for showcasing the attribute name from the associated class within the matching field in Angular

Eliminate the empty choice for Angular when dealing with dynamic option objects

Issue encountered when attempting to assign a local variable as the initial value of an enum object member

The AngularJS error message states that there is an issue because the $resource function is

Having trouble connecting to Node.js websocket service from Angular in a live environment

Trouble installing Angular: ENOENT Error causing issues

Harmonize the connectivity between an Angular - .NET application and the Google Calendar API

Tips for calculating the total sum of inner object property values using JavaScript, TypeScript, or Angular 5

How to properly adjust HTTP headers within an AngularJS factory

Is it a good idea to utilize triggers when bootstrapping an application?

When trying to import axios from the 'axios.js' file in the 'lib' directory, a SyntaxError was encountered with the message: Unexpected identifier

Utilize ng-click in conjunction with an AngularJS directive

retrieve a collection of objects using Angular CLI

Narrow down your search results with date range filtering in Angular Material

Turn TypeScript - Modify type properties to reflect types of their descendants

The select dropdown default choice is not appearing as expected

Is it possible to link the value of an input[range] to an array?

Is there a way to prevent the Drop event in Angular2?

Storing data in Angular 2's ngFor loop for later usage

The declaration file for module 'react/jsx-runtime' could not be located