Ошибка при добавлении нового компонента с Angular

Question

Я начинаю с Angular, но у меня проблема с добавлением нового компонента:

Я начал новый проект в Angular с ng new toto без ошибок, затем я добавляю новый компонент с ng generate component menu без ошибок, и я удаляю все в моем app.component.html, и я добавляю MenuComponent с <MenuComponent></MenuComponent>

app.module.ts

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

import { AppComponent } from './app.component';
import { MenuComponent } from './menu/menu.component';

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

menu.component.ts

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

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

  constructor() { }

  ngOnInit() {
  }

}

app.component.html

<MenuComponent></MenuComponent>

Моя версия Angular CLI:

Angular CLI: 6.0.0
Node: 10.0.0
OS: linux x64
Angular: 6.0.0
... animations, cli, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.0
@angular-devkit/build-angular     0.6.0
@angular-devkit/build-optimizer   0.6.0
@angular-devkit/core              0.6.0
@angular-devkit/schematics        0.6.0
@ngtools/webpack                  6.0.0
@schematics/angular               0.6.0
@schematics/update                0.6.0
rxjs                              6.1.0
typescript                        2.7.2
webpack                           4.6.0

У меня вопрос, почему эта простая вещь не работает?

Моя ошибка

 Error: Template parse errors:
'MenuComponent' is not a known element:
1. If 'MenuComponent' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("[ERROR ->]<MenuComponent></MenuComponent>
"): ng:///AppModule/AppComponent.html@0:0

Заранее спасибо за помощь

Answer 1

Я уверен, что ваши selector для MenuComponent должны отличаться.

Используйте selector, который имеется в menu.component.ts, вместо использования самого имени компонента. Что-то вроде

<app-menu> </app-menu>