Generierte Komponente von anglecli nicht Rendering-Vorlage

Ich kann den Selektor in Chrome Developer Tools sehen, wenn ich die Website bedienen und die Seite überprüfen, aber HTML innerhalb der Vorlage wird nicht angezeigt. Die Komponente wurde direkt von angular cli hinzugefügt und alles, was ich getan habe, war das Hinzufügen der öffnenden/schließenden Selektor-Tags zu der Datei index.html. In der Konsole sind keine Fehler aufgetreten. HierGenerierte Komponente von anglecli nicht Rendering-Vorlage

ist, was ich in der Chrome-DOM sehe:

<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 { }

Running: in Visual Studio-Code npm Version 5.5.1 Angular 5.1.0 Winkel cli 1.6.0

Verwendung von Befehlszeile ng-dienen.

Quelle

2017-12-15 Darren Cook

überprüfen Sie Ihre Konsole und poste das Problem – Sajeetharan

hast du deine Komponente in deinem app.module.ts hinzugefügt? –

Es gibt keine Probleme in der Konsole zu posten. Vergessen zu erwähnen - wird zum ursprünglichen Beitrag hinzugefügt. Die eckige CLI-Komponente wurde automatisch zu app.module.ts hinzugefügt, ja. –

oops Sie Ihre

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

in app.component.html hinzufügen sollten nicht in index.html

Quelle

2017-12-15 06:03:40

Ich bin mir ziemlich sicher, dass Ihr AppModule 's bootstrap Array [AppComponent] drin hat. So startet eine Angular App. Sie booten das eine Modul AppModule und im Bootstrap-Array des Moduls gibt es AppComponent. Was auch immer in <app-root></app-root> ist, wo Ihre Angular App gerendert wird.

Sie wollen <app-header></app-header> und <app-footer></app-footer> in Ihrem App.component.html setzen könnte

Quelle

2017-12-15 04:23:36

Ich habe das auch schon probiert. Es ergibt das gleiche Ergebnis. –

Zeigen Sie Ihre: App.module.ts, app.component.ts, app.component.html –

Zum ursprünglichen Post hinzugefügt. –

Generierte Komponente von anglecli nicht Rendering-Vorlage

Antwort

Verwandte Themen