2016-06-18 8 views
0

私のapp.componentは角度2で動作していますが、テスト1を動作させることはできません。それは私のhtmlの "Loading ..."メッセージを過ぎていません。誰かが私のコードを見直して、どこが間違っているか見てみてください。私は完璧に見ているコースを辿ったと思ったが、何も出てこないようだ。角度2がテストコンポーネントをロードしていない

app.component.ts:

import {Component} from '@angular/core'; 
import {MyComponent} from './my-component.component'; 

@Component({ 
    selector: 'my-app', 
    template: ` 

    <h1>My First Angular 2 App</h1><my-component> 
    </my-component>`, 

directives: [MyComponent] 
}) 
export class AppComponent { } 

私-component.ts:

import {Component} from '@angular/core'; 

@Component ({ 
selector: 'my-component', 
template: `<h2>Hello World</h2>` 

}) 

export class MyComponent { 
} 

のindex.html:

<html> 
<head> 
<title>Angular 2 QuickStart</title> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="styles.css"> 

<!-- Polyfill(s) for older browsers --> 
<script src="node_modules/core-js/client/shim.min.js"></script> 

<script src="node_modules/zone.js/dist/zone.js"></script> 
<script src="node_modules/reflect-metadata/Reflect.js"></script> 
<script src="node_modules/systemjs/dist/system.src.js"></script> 

<script src="systemjs.config.js"></script> 
<script> 
    System.import('app').catch(function(err){ console.error(err); }); 
</script> 
    </head> 

    <body> 
<my-app>Loading...</my-app> 

+0

コンソールには何が表示されていますか? './my-component.component ';' が見つかりません? –

+0

@JS_astronautsそうです、 "app/app.component.ts(2,27):エラーTS2307: './my-component.component'モジュールが見つかりません。" – MoSheikh

+1

あなたのパスを確認してください。両方のコンポーネントファイルが同じディレクトリ内にありますか? –

答えて

1

//コードしかし、その私の-component.tsの今

//もし名前で私の視点から、1つの問題のようです:ファイルの名前

//次にアプリのコンポーネントで、あなたはそれを

import {MyComponent} from './my-component'; 
をインポートする必要がありますされます

//あなたは注釈

と輸入の角ハンドルにそれをしながら、.compomnentが必要とされない//

import {MyComponent} from './my-component**.component**'; 

それを行っています

//インポートの詳細についてClick Here

+0

ありがとう、拡張機能を削除して問題を解決しました。 – MoSheikh

関連する問題