anglecliから生成されたコンポーネントがテンプレートをレンダリングしません

サイトを提供してページを検査しても、テンプレート内のhtmlが表示されない場合、Chrome開発者ツールでセレクタが表示されます。このコンポーネントは、angle cliから直接追加されていました。これは、index.htmlファイルに開始/終了セレクタタグを追加することでした。コンソールにエラーはありません。ここでanglecliから生成されたコンポーネントがテンプレートをレンダリングしません

は、私はクロームDOMに見ていますものです：

<body> 
<app-header></app-header> 
<app-root></app-root> 
<app-footer></app-footer>

footer.component.ts：

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

@Component({ 
    selector: 'app-footer', 
    templateUrl: './footer.component.html', 
    styleUrls: ['./footer.component.css'] 
}) 
export class FooterComponent implements OnInit { 

    constructor() { } 

    ngOnInit() { 
    } 

}

footer.component.html

<p> 
    footer works! 
</p>

app.module .ts：

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 


import { AppComponent } from './app.component'; 
import { HeaderComponent } from './header/header.component'; 
import { FooterComponent } from './footer/footer.component'; 


@NgModule({ 
    declarations: [ 
    AppComponent, 
    HeaderComponent, 
    FooterComponent 
    ], 
    imports: [ 
    BrowserModule 
    ], 
    providers: [], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { }

実行： NPMのバージョンのVisual Studioのコードで、コマンドラインからNGがサーブ使用5.5.1 角度5.1.0 角度CLI 1.6.0

。

出典

2017-12-15 Darren Cook

のindex.htmlにapp.component.htmlであなたの

<app-header></app-header> and <app-footer></app-footer>

を追加する必要があります

あなたのApp.component.html内<app-header></app-header>と<app-footer></app-footer>を入れたいかもしれませんあなたコンソールを開き、問題を投稿してください – Sajeetharan

あなたはあなたのコンポーネントをapp.module.tsに追加しましたか？ –

投稿するコンソールに問題はありません。言及を忘れた - 元の投稿に追加されます。角度生成コンポーネントが自動的にapp.module.tsに追加されました。 –

おっと、あなたがいないチェック

出典

2017-12-15 06:03:40

あなたのAppModuleのbootstrap配列には[AppComponent]が含まれています。これはAngularアプリの起動方法です。あなたは1つのモジュールAppModuleをブートストラップし、モジュールのブートストラップアレイにはAppComponentがあります。したがって、<app-root></app-root>の中には、あなたのアンギュラアプリケーションがレンダリングされる場所があります。

出典

2017-12-15 04:23:36

私はすでにこれも試しました。同じ結果が得られます。 –

あなたへの表示：App.module.ts、app.component.ts、app.component.html –

元の投稿に追加されました。 –

anglecliから生成されたコンポーネントがテンプレートをレンダリングしません

答えて

関連する問題