未能使用angular2导入导出类

因此，我一直在试着按照egghead.io的教程进行操作。然而，我似乎无法让step2工作。未能使用angular2导入导出类

我创建了TodoInput类是这样的：

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);

，最后使用Hello世界标签索引：

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像这样使用它.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> 
     <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>

当我试图运行此我得到一个错误：“G ET/src/TodoInput“错误（404）：”未找到“。我究竟做错了什么？

我对这个版本angular2运行：

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

来源

2015-12-03 Nemeas

你确定'TodoInput'在'src'中，而不在子目录中吗？ – drewmoore

是的，我很舒服。 – Nemeas

看看这个工作实例

Demo

您需要拥有的helloWorld文件的.ts文件扩展名。

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

休息很好。看看上面给出的链接。

来源

2015-12-03 10:41:14 micronyks

谢谢！这导致我找到解决方案。原来我需要改变index.html文件中某些语句的顺序。 – Nemeas

问题出在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（不带扩展名）工作。

来源

2015-12-03 11:57:52 Nemeas

未能使用angular2导入导出类

回答

相关问题