[SOLVED] How to make TypeScript work with SystemJS? (issue with .js extension)

How to make TypeScript work with SystemJS? (issue with .js extension)

I start with the following import in my TypeScript file. Note no .ts extension implies that I am importing a TypeScript module:

import githubService from './github.service';

This gets transpiled to:

var github_service_1 = require('./github.service');

When SystemJS tries to load this module, it issues the following HTTP command:

GET /github.service

instead of GET /github.service.js. This obviously does not work.

How can I make TypeScript work with SystemJS?

Here's my tsconfig.json file:

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "outDir": "./dist",
        "declaration": false,
        "noImplicitAny": false,
        "removeComments": true,
        "noLib": false,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "sourceMap": true
    },
    "exclude": [
        "node_modules"
    ],
    "compileOnSave": false
}

I also tried to change the module option above to system (changing the generated module format from CommonJS to SystemJS), I still get the same issue.

Solution

I think that your problem is missing js extensions in the module names. Not so long ago System.js changed this and now to be able to resolve them without explicitly specifiyng '.js' you must setup System.js options in your index.html like this:

System.defaultJSExtensions = true;

For more info: defaultJSExtensions

EDIT

As pointed out by @Naresh the defaultJSExtensions is obsolete now. The preferable way as it seems now is to use packages option in config instead.

Hope this helps.