2016-01-31 48 views
2

經驗豐富的Angular 1開發人員試圖學習Angular 2.我有一個準系統行爲奇怪的準系統。我使用MeteorJS來提供一切。這裏是應用程序結構 -爲什麼我的應用程序組件呈現應用程序組件?

client/ 
    components/ 
     articles/ 
      articles.component.html 
      articles.component.ts 
    index.html 
    app.html 
    app.ts 

的index.html -

<template> 
    <app></app> 
</template> 

app.html -

<template> 
    <nav> 
    <ul> 
     <li> 
     <a [routerLink]="['Articles']">Articles</a> 
     </li> 
     <li>Nav 2</li> 
     <li>Nav 3</li> 
     <li>Nav 4</li> 
    </ul> 
    </nav> 
    <section> 
    <router-outlet></router-outlet> 
    </section> 
</template> 

app.ts -

import {Component, View} from 'angular2/core'; 
import {bootstrap} from 'angular2-meteor'; 

module WSN.App { 

    @Component({ 
    selector: 'app', 
    templateUrl: 'app.html' 
    }) 

    export class AppComponent { 

    } 

    bootstrap(AppComponent); 
} 

,我贏了」除非有要求才顯示文章文件。我得到這個是這個HTML的

<body> 
    <app> 
    <html> 
     <head> 
     </head> 
     <body> 
     <app></app> 
     </body> 
    </html> 
    </app> 
</body> 

更改templateUrltemplate有同樣的問題。任何人有任何想法爲什麼app.html未加載?爲什麼HTML會翻倍?控制檯中沒有錯誤。

編輯:

更新了AppComponent構造函數 -

export class AppComponent { 
    constructor() { 
     alert('x'); 
    } 
    } 

而且我看到警示。

+1

爲什麼你在'index.html'中包含'',以及包含'