CODEWITHSUNDEEP
typescriptsystemjs
pinale
pinale

Reputation: 2214

typescript with systemjs configuration error

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';
}

Upvotes: 0

Views: 380

Answers (1)

Raj
Raj

Reputation: 4010

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>

Upvotes: 1

Related Questions