具有systemjs配置错误的typescript

时间:2017-05-18 07:25:55

标签: typescript systemjs

我一步一步地遵循了这个简单的教程但是我得到了404错误 enter link description here

我确定我已经在本地安装了打字稿

npm install typescript --save

(node_modules文件夹中的typescript存在)

这是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

并在浏览器控制台中

[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

我该如何进一步调查?

<小时/> 项目结构:

.
├── 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';
}

1 个答案:

答案 0 :(得分:1)

我按照您提供的链接为您创建了一个有效的plunkr演示。

Plunker Demo

这是我在index.html中的脚本的外观。希望这会有所帮助。

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