Я новичок в angular 5 и получаю эту ошибку: Uncaught Error: Ошибки синтаксического анализа шаблона: 'employee-list' не известен элемент:

Question

Я новичок в Angular 5 и смотрю учебное пособие, и инструктор сделал два компонента, а затем добавил свои теги в app.component.html

, в консоли выдается эта ошибка:

Uncaught Error: Template parse errors:
'employee-list' is not a known element:
1. If 'employee-list' is an Angular component, then verify that it is part of this module.
2. If 'employee-list' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
</div>

видео для этого в учебнике: https://www.udemy.com/angular-mastering-the-basics/learn/v4/t/lecture/10121074?start=30

вот мой код: app.component.html:

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  
</div>

<employee-list></employee-list>

app.module.ts:

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

import { AppComponent } from './app.component';
import { EmployeeListComponent } from './employee-list/employee-list.component';
import { EmployeeDetailComponent } from './employee-detail/employee-detail.component';

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

employee-list.component.ts:

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

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

  public employees;
  constructor() { }

  ngOnInit() {
  }

}

employee-list.component.html:

<p>
  employee-detail works!
</p>

Не понимаю, что не так и как это исправить?

Answer 1

Помните, по умолчанию Angular добавляет app в качестве префикса.Поэтому вы должны использовать <app-employee-list></app-employee-list>.Кроме того, если вы не уверены, посмотрите на селектор компонента.В вашем случае это ваш селектор.selector: 'app-employee-list',.Не стесняйтесь менять его, но рекомендуется именовать.

Answer 2

Используйте <app-employee-list></app-employee-list> вместо.Имя тега / селектора указывается в employee-list.component.ts:

...
 selector: 'app-employee-list'
...