在同一页面上添加组件时丢失渲染

Question

我想在同一页面上添加多个组件。但是当我添加组件头时。我没有在本地主机上的渲染。但是，如果删除标题，则会再次呈现。但是，对于第一种情况和其他情况，我在终端上都没有错误。我已经检查过this answer by Adrien Brunelat，但似乎一切都很好。

主要组件

app.component.html：

<app-header></app-header>
<app-menu></app-menu>

app.component.ts：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'conFusion';
}

标题组件

header.component.html

<mat-toolbar color="primary">
  <span><img src="/assets/images/logo.png" height=30 width=41></span>
  <a mat-button><span class="fa fa-home fa-lg"></span> Home</a>
  <a mat-button><span class="fa fa-info fa-lg"></span> About</a>
  <a mat-button><span class="fa fa-list fa-lg"></span> Menu</a>
  <a mat-button><span class="fa fa-address-card fa-lg"></span> Contact</a>
</mat-toolbar>

<div class="container jumbotron"
    fxLayout="row"
    fxLayout.sm="column" 
    fxLayout.xs="column" 
    fxLayoutAlign.xs="start center"
    fxLayoutAlign.sm="start center" 
    fxLayoutAlign.gt-sm="center center" 
    fxLayoutGap="10px">

  <div fxFlex fxFlex.gt-sm="50%">
    <h1>Ristorante Con Fusion</h1>
    <p>We take inspiration from the World's best cuisines, and create a unique fusion experience. Our lipsmacking creations
      will tickle your culinary senses!</p>
  </div>
  <div fxFlex fxFlex.gt-sm="20%">
    <img src="/assets/images/logo.png" alt="Logo">
  </div>
  <div fxFlex></div>
</div>

header.component.ts

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

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

    title = 'Header works!';

  constructor() { }

  ngOnInit() {
  }

}

菜单完美运行，如果您需要，我也可以与您共享。我的存储库也是私有的，但我可以与您共享。

这里是the Stackblitz（我做到了！）。它返回我在终端中没有的错误：

Error in /turbo_modules/@angular/compiler@8.2.3/bundles/compiler.umd.js (2603:21)
Can't resolve all parameters for MenuComponent: (?).

版本

我有angular8.2.2

Answer 1

解决方法是声明我在app.module.ts中使用的模块：

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

@NgModule({
  declarations: [
    AppComponent,
    MenuComponent,
    DishdetailComponent,
    HeaderComponent,
    FooterComponent
...

我不知道它没有显示任何错误的原因。