Systemjs and tsc setup - *.ts.js 404 (Not Found) Error

Question

I was just trying to create proof-of-concept TS + SystemJS project with minimum possible setup - without "Angular2 starter kit" and such. I've spent an hour googling and tweaking this setup but it still doesn't work.

I have the following setup:

/src/
 - model.ts
 - bootstrap.ts

/dist/

tsconfig.json
system.config.js
index.html

My tsconfig.json

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es6",
        "noImplicitAny": false,
        "sourceMap": true,
        "removeComments": false,
        "outDir": "./dist/"
    },
    "filesGlob": [
        "./src/**/*.ts"
    ],
    "compileOnSave": true
}

My SystemJS config

System.config({
    paths: {
        // paths serve as alias
        'npm:': 'node_modules/'
    },
    map: {
        testapp: './src'
    },
    baseURL: './src',
    packages: {
        testapp: {
            format: 'register',
            defaultExtension: 'js'
        }
    },

});

My index.html

  <script src="/node_modules/systemjs/dist/system-polyfills.js"></script>
    <script src="/node_modules/systemjs/dist/system.src.js"></script>
    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
    System.import('bootstrap.ts')
        .then(function(app) {
            console.log('app bootstrap success!');
        }, console.error.bind(console));
    </script>

In the end I have following error in console:

system.src.js:1051 GET http://0.0.0.0:8080/src/bootstrap.ts.js 404 (Not Found)fetchTextFromURL @ system.src.js:1051....
Error: (SystemJS) XHR error (404 Not Found) loading

I run tsc -w in one terminal tab and simple https server in the other.

Apparently - SystemJS wants to consume files with .ts.js extension while tsc generates .js and source maps but NOT .ts.js.

Do I miss webpack or gulp to do some part of the job? I thought SystemJS and tsc could do the bundling and transpiling but apparently there's smth missing in the build process. Explanation on the SystemJS setup rather than fixing the bug would be also very helpful.

System.js doesn't know which transpiler to use because you haven't specified one in its configuration. Refer to [this SO post](http://stackoverflow.com/questions/33032390/how-to-make-systemjs-transpile-typescript-based-on-file-extension-not-contents) — Mjh, Nov 01 '16 at 11:53
Why do you do `System.import('bootstrap.ts')` and not `System.import('bootstrap.js')`? — Nitzan Tomer, Nov 01 '16 at 11:57

score 0 · Answer 1 · edited May 23 '17 at 12:19

Setup can be fixed by following:

1) as @Nitzan Tommer mentioned - change .ts to .js in System.import block

index.html: System.import('bootstrap.js')

2) (SystemJS) require is not defined error is fixed by this post - change tsconfig.json to have "system" as modules

{
    "compilerOptions": {
        "module": "system",
        "target": "es5",
//..

Here is the demo repo I've created with this setup: https://github.com/shershen08/systemjs-typescript-simple

Systemjs and tsc setup - *.ts.js 404 (Not Found) Error

1 Answers1