无法使用 angular2 导入导出 class

Question

所以我一直在努力学习 egghead.io 的教程。但是我似乎无法让 step2 工作。

我创建了 TodoInput class 这样的：

import {Component, View} from 'angular2/angular2';
@Component({
    selector: 'todo-input'
})

@View({
    template: `
        <div>This is written in the todoInput export class</div>
    `   
})

export class TodoInput{}

并像这样在 helloWorld.ts 中使用它：

import{Component,View,bootstrap} from 'angular2/angular2';
import{TodoInput} from './TodoInput';

@Component({
    selector: 'hello-world'
})

@View({
    directives: [TodoInput],
    template: `
        <div>
            <h1>This is a heading!</h1>
            <todo-input/>
        </div>
    `
})

class HelloWorld{}

bootstrap(HelloWorld);

最后在 index.html 中使用 hello-world 标签，如下所示：

<html>
    <head>
        <title>Angular 2 Quickstart</title>
        <script src="node_modules/traceur/bin/traceur.js"></script>
        <script src="node_modules/systemjs/dist/system.js"></script>
        <script src="node_modules/angular2/bundles/angular2.min.js"></script>
    </head>
    <body>
        <hello-world></hello-world>
        <script>
            System.import('src/helloWorld.js');
        </script>
    </body>
</html>

当我尝试运行时，出现错误："GET /src/TodoInput" 错误 (404)："Not found"。我做错了什么？

我运行正在使用这个版本的 angular2:

"angular2/angular2.d.ts": {
  "commit": "78d36dd49b6b55b9fdfe61776a12bf05c8b07777"
}

Answer 1

看看这个工作示例

Demo

您需要为 helloWorld 文件添加 .ts 文件扩展名。

System.import("src/helloWorld").catch(console.error.bind(console));

休息就好。看上面给出的link。

Answer 2

问题在于 index.html 文件中语句的写入顺序。以下是我的解决方案：

<html>
    <head>
        <title>Angular 2 Quickstart</title>
        <script src="node_modules/traceur/bin/traceur.js"></script>
        <script src="node_modules/systemjs/dist/system.js"></script>
    </head>
    <body>
        <hello-world></hello-world>
        <script>
            System.config({defaultJSExtensions:true});    
        </script>
        <script src="node_modules/angular2/bundles/angular2.min.js"></script>
        <script>
            System.import('src/helloWorld').catch(console.error.bind(console));
        </script>
    </body>
</html>

我还添加了 System.config({defaultJSExtensions:true}) 以使 src/helloWorld（没有扩展名）工作。

无法使用 angular2 导入导出 class

Failing to import an export class using angular2

typescript

angular