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 — Mjh
– Mjh, Commented Nov 1, 2016 at 11:53
Why do you do System.import('bootstrap.ts') and not System.import('bootstrap.js')? — Nitzan Tomer
– Nitzan Tomer, Commented Nov 1, 2016 at 11:57

Community · Accepted Answer · 2017-05-23 12:19:16Z

0

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

edited May 23, 2017 at 12:19

CommunityBot

11 silver badge

answered Nov 1, 2016 at 12:34

shershen

10k11 gold badges44 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related