角2コンポーネントtemplateUrlが表示されない

Question

私はknockoutjsアプリケーションをAngular 2に移植しています。この段階では、純粋にhtmlテンプレート（Webアプリケーションのランディングページ）で構成されるAngular 2コンポーネントがあります。

しかし、いずれのHTMLもウェブサイトに表示されていません。私は、ランディングページを表示するように変更する前に、「私の最初の2角形のアプリ」というページを持っていたので、ウェブサイトの角度2の部分が機能していることが分かりました。

app.component.ts：

import { Component } from '@angular/core'; 
@Component({ 
    selector: 'my-app', 
    template: '<landing-page></landing-page>' 
}) 
export class AppComponent { } 

main.ts

import { bootstrap } from '@angular/platform-browser-dynamic'; 
import { AppComponent } from './app.component'; 
bootstrap(AppComponent); 

landingpage.component.ts：

import { Component } from '@angular/core'; 
@Component({ 
    selector: 'landing-page', 
    templateUrl: 'app/scripts/landingpage.component.html', 
}) 
export class LandingPage { } 

landingpage.component.html：

<div id="landing-page" style="background-color: #696969;overflow-y:auto;" class="full-size special"> 
<div id="google-attribute"></div> 
    <div style="height:100%;padding: 40px 40px 40px 40px; min-height:600px;"> 
     <div class="row sm" style="height:20%;"> 
      <div class="col-xs-3" style="height:100%;"> 
       <img class="small-monster" width="100" src="assets/images/home_page/monster2.png"/> 
      </div> 
      <div class="col-xs-6"></div> 
      <div class="col-xs-3 small-monster" style="height:100%;"> 
       <img class="small-monster" style="float:right;" width="100" src="assets/images/home_page/monster4.png"/> 
      </div> 
     </div> 
     <div class="row main-row"> 
      <div class="col-sm-3 bm" style="height:100%;"> 
       <div class="vertical-center"> 
       <img width="250" src="assets/images/home_page/monster2.png"/> 
       </div> 
      </div> 
      <div class="col-sm-12 col-md-6" style="height:100%;" > 
       <div id="motto-text" class="vertical-center"> 
        <h5 class="white-text medium-text">THE VEGAN REPOSITORY</h5> 
        <h1 id="main-text" 
         class="text-center white-text display-3"> 
         FIND VEGAN STUFF* NEAR YOU. 
        </h1> 
        <a id="try-now-button" 
         class="with-border clickable" 
         href="#search-filter-page" > 
         <h5 class="text-center medium-text">TRY NOW</h5> 
        </a> 
       </div> 
      </div> 
      <div class="col-sm-3 bm" style="height:100%;"> 
       <div class="vertical-center"> 
       <img width="250" src="assets/images/home_page/monster4.png"/> 
       </div> 
      </div> 
      <div class="row br"> 
        <div class="col-xs-12" style="display:table;height:100%;"> 
         <h4 style="color:#FFF; display: table-cell; vertical-align: bottom;">*Stuff like restaurants, meat alternatives, dairy alternatives, and much more!</h4> 
        </div> 
      </div> 
     </div> 
    </div> 
</div> 

表示から私のhtmlを停止していますミッシングリンクは、何ですか？

Answer 1

landingpage.component.ts

@Component({ 
    selector: 'my-app', 
    template: '<landing-page></landing-page>', 
    directives: [] 
}) 
export class LangingPage { } <== it should be not AppComponent 

次に、あなたがあなたのapp.component.tsでそれをインポートする必要があります。

import { LangingPage } from './landingpage.component' 

し、それを追加することを忘れないでくださいdirectivesコンポーネントのメタデータ：

@Component({ 
    selector: 'my-app', 
    template: '<landing-page></landing-page>', 
    directives: [LangingPage ] <== this line 
}) 
export class AppComponent { }