未能使用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導入導出類

回答

相關問題