typescript with systemjs configuration error

Question

i've followed this simple tutorial step by step but i got this 404 error enter link description here

i'm sure i've installed typescript locally

npm install typescript --save

(the typescript in the node_modules folder is present)

this is the output of lite-server

17.05.18 09:14:25 200 GET /index.html
17.05.18 09:14:25 200 GET /node_modules/systemjs/dist/system.js
17.05.18 09:14:25 200 GET /node_modules/systemjs/dist/system.js.map
17.05.18 09:14:25 200 GET /node_modules/typescript/lib/typescript.js
17.05.18 09:14:25 200 GET /src/main.ts
17.05.18 09:14:25 404 GET /typescript

and in the browser console

[object Error]{description: "Fetch error...", message: "Fetch error...", name: "Error", originalErr: Error {...}, stack: "Error: Fetc..."}
Instantiating http://localhost:3000/typescript
Loading typescript
Unable to load transpiler to transpile http://localhost:3000/src/main.ts 
Instantiating http://localhost:3000/src/main.ts

how can i investigate further?

project structure:

.
├── index.html
├── package.json
└── src
    ├── main.ts
    └── person.ts

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>SystemJS</title>
  <script src="node_modules/systemjs/dist/system.js"></script>
  <script src="node_modules/typescript/lib/typescript.js"></script>
  <script>
    System.config({
      transpiler: 'typescript',
        packages : {
            src: {
                defaultExtension: 'ts'
            }
        }
    });
    System
      .import('src/main')
      .then(null, console.error.bind(console));
  </script>
</head>
<body>
</body>
</html>

main.ts

import { Person } from './person';

let person = new Person();
console.log(person.name);

person.ts

export class Person {
    public name: string = 'xxxxxx';
}

can you post the full message in the error you get in the console? — toskv
– toskv, Commented May 18, 2017 at 7:28
please provide source code, its difficult to say something without seeing your code. — Raj
– Raj, Commented May 18, 2017 at 8:08

Raj · Accepted Answer · 2017-05-18 19:25:40Z

1

I followed the link you provided and created a working plunkr demo for you.

Plunker Demo

This is how my script in index.html looks. Hope this helps.

<script src="https://unpkg.com/[email protected]/dist/system.js"></script>
<script>
  System.config({
    transpiler: 'typescript',
    packages: {
      src: {
        defaultExtension: 'ts'
      }
    },
    paths: {
      'npm:': 'https://unpkg.com/'
    },
    map: {
      'typescript': 'npm:[email protected]/lib/typescript.js'
    }
  });
  System
    .import('src/main')
    .then(null, console.error.bind(console));
</script>

edited May 18, 2017 at 19:25

answered May 18, 2017 at 8:23

Raj

4,0007 gold badges57 silver badges80 bronze badges

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

2 Comments

pinale Over a year ago

First of all thanks for your plunker! adding "paths" and "map" properties to the SystemJS configuration my code works, and morover i noted the output of lite server doesn't show the 404 on the "/typescript" path. Does it mean that it is loading typescript from remote? (a sort fo cdn?) or is loading from the node_modules folder. If it is true "the first" why the code in the tutorial works without the "paths" and "map" properties

Raj Over a year ago

In the tutorial typescript is referred from node_module folder which you can see in last index.html code sample. In my plunkr example its loaded via CDN (unpkg.com) which you can see in paths section.

Collectives™ on Stack Overflow

typescript with systemjs configuration error

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related