CODEWITHSUNDEEP
typescriptsystemjs
SONGSTER
SONGSTER

Reputation: 615

Why is module.js file not running in the browser

the code is not running and nothing is being output to the console like if i try console.log("random text"); in module.ts it doesn't logs anything to the console

Here I am basically trying to run modules in my typescript project. So I installed systemjs included it in added config. added module "system" in tsconfig. but its still not working

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>

Upvotes: 2

Views: 1323

Answers (1)

Louis
Louis

Reputation: 151401

The problem is that you are setting tsc to produce a SystemJS bundle and then you use System.import to load the bundle. Loading a bundle only registers the modules in the bundle. It does not execute the modules in the bundle: they still have to be requested.

When you use outFile you're saying "put all my modules in the same file" and this is a bundle. This creates a file with the module names exactly as you put in your TypeScript code. So if they don't have extensions there, then they don't have extensions in the produced bundle. You can see that by looking at the file that tsc produces:

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

If you don't want to use a bundle

Change your tsconfig.json to remove outFile:

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

Change your SystemJS configuration to this:

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

The setting to add default extensions is defaultExtension in the singular and it is valid inside packages.

And let SystemJS add the .js, so import module rather than module.js:

SystemJS.import("module");

If you want to use a bundle

Change your tsconfig.json to give your bundle a name that is different from your module, as this will help clear confusion:

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

And declare the bundle in your SystemJS configuration:

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

Just as above you should import without the extension:

SystemJS.import("module")

This is an aside but I recommend not naming your module module because, besides not describing what the module is about, it hurts portability. AMD loaders for instance, reserve the module name module for an kind of virtual module provided by the loader.

Upvotes: 2

Related Questions