typescript - ¿Por qué el archivo module.js no se ejecuta en el navegador?

el código no se está ejecutando y no se está mostrando nada en la consola, como si intento console.log("texto aleatorio"); en module.ts no se registra nada en la consola

Aquí básicamente estoy intentando ejecutar módulos en mi proyecto de TypeScript. Así que instalé systemjs, lo incluí en la configuración añadida, agregué el módulo "system" en tsconfig, pero todavía no funciona

import { add } from "./function1";
import { subtract } from "./function2";
import { Person } from "./interface";

const John: Person = {
    name: "John",
    lastname: "Doe",
    greet(): void {
        console.log(`Hello, ${this.name} ${this.lastname}`);
    }
}
const addition = add(3, 3);
const subtraction = subtract(5, 2); 

console.log("Random Text"); //Doesnt Work



PACKAGE JSON
{
  "name": "assignment_4.3",
  "version": "0.0.1",
  "description": "typescript modules app",
  "main": "module.js",
  "dependencies": {
    "systemjs": "^0.20.18"
  },
  "devDependencies": {
    "lite-server": "^2.3.0"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev":"lite-server"
  },
  "keywords": [
    "typescript",
    "modules"
  ],
  "license": "ISC"
}

{
    "compilerOptions": {
        "module":"system",
        "target": "es5",
        "noEmitOnError": true,
        "sourceMap": true,
        "removeComments": true,
        "outFile": "./module.js"
    }
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">   
    <title>Document</title>
    <script src="./node_modules/systemjs/dist/system.js"></script>
</head>

<body>
    
    <script>
        SystemJS.config({
            baseUrl: '/',
            defaultExtensions: true
        });

        SystemJS.import('./module.js');
    </script>
</body>

</html>

Output HTML =====================

<body data-gr-c-s-loaded="true" cz-shortcut-listen="true"><script id="__bs_script__">//<![CDATA[
document.write("<script async src='/browser-sync/browser-sync-client.js?v=2.18.13'><\/script>".replace("HOST", location.hostname));
//]]></script><script async="" src="/browser-sync/browser-sync-client.js?v=2.18.13"></script>


<script>
    SystemJS.config({
        baseUrl: '/',
        defaultExtensions: true
    });

    SystemJS.import('module.js');
</script>


</body>

Respuesta #1

El problema es que estás configurando tsc para producir un paquete SystemJS y luego usas System.import para cargar el paquete. Cargar un paquete solo registra los módulos en el paquete. No ejecuta los módulos en el paquete: todavía deben ser solicitados.

Cuando usas outFile estás diciendo "pon todos mis módulos en el mismo archivo" y esto es un paquete. Esto crea un archivo con los nombres de los módulos exactamente como los pusiste en tu código TypeScript. Así que si no tienen extensiones allí, entonces no tienen extensiones en el paquete producido. Puedes ver eso mirando el archivo que tsc produce:

System.register("module", [], function (exports_1, context_1) {
    "use strict";
    var __moduleName = context_1 && context_1.id;
    return {
        setters: [],
        execute: function () {
            console.log("MODULE");
        }
    };
});

Si no quieres usar un paquete

Cambia tu tsconfig.json para eliminar outFile:

{
    "compilerOptions": {
        "module":"system",
        "target": "es5",
        "noEmitOnError": true,
        "sourceMap": true,
        "removeComments": true
    }
}

Cambia tu configuración de SystemJS a esto:

    SystemJS.config({
      baseUrl: './',
      packages: {
        '': {
          defaultExtension: "js"
        },
      }
    });

La configuración para agregar extensiones predeterminadas es defaultExtension en singular y es válida dentro de packages.

Y deja que SystemJS agregue el .js, así que importa module en lugar de module.js:

SystemJS.import("module");

Si quieres usar un paquete

Cambia tu tsconfig.json para darle a tu paquete un nombre que sea diferente al de tu módulo, ya que esto ayudará a evitar confusiones:

{
    "compilerOptions": {
        "module":"system",
        "target": "es5",
        "noEmitOnError": true,
        "sourceMap": true,
        "removeComments": true,
        "outFile": "bundle.js"
    }
}

Y declara el paquete en tu configuración de SystemJS:

   SystemJS.config({
        baseUrl: './',
        bundles: {
          "bundle.js": ["module"],
        },
    });

Tal como arriba, deberías importar sin la extensión:

SystemJS.import("module")

Esto es un aparte, pero recomiendo no nombrar tu módulo module porque, además de no describir de qué se trata el módulo, perjudica la portabilidad. Por ejemplo, los cargadores AMD reservan el nombre del módulo module para un tipo de módulo virtual proporcionado por el cargador.