从 angularcli 生成的组件不呈现模板

Question

我可以在 Chrome 开发人员工具中看到选择器，当我为网站提供服务并检查页面时，但是模板中的 html 没有出现。该组件是直接从 angular cli 添加的，我所做的只是将 opening/closing 选择器标签添加到 index.html 文件中。控制台没有错误。

这是我在 Chrome 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 版本 5.5.1 Angular 5.1.0 angular客户端 1.6.0

在 Visual Studio 代码中从命令行使用 ng-serve。

Answer 1

我很确定你的 AppModule 的 bootstrap 数组中有 [AppComponent]。 Angular 应用程序就是这样启动的。您 bootstrap 一个模块 AppModule 并且在模块的 bootstrap 数组中，有 AppComponent。因此 <app-root></app-root> 中的任何内容都将是您的 Angular 应用程序呈现的位置。

您可能想将 <app-header></app-header> 和 <app-footer></app-footer> 放入您的 App.component.html

Answer 2

糟糕，你应该添加你的

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

在 app.component.html 不在 index.html

从 angularcli 生成的组件不呈现模板

Generated component from angularcli not rendering template

visual-studio-code

angular-cli

angular-components

angular