'child-selector' is not a known element Angular 2

Question

I am trying to perform communication from child component to parent component on certain action. For this purpose, I am using EventEmitter and Output Libraries. I will show you what I have done so far.

Here is my child component file sports-list.component.ts

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

@Component({
    selector: 'app-sportslist',
    templateUrl: './sportslist.component.html'
})

export class SportsListComponent {
    @Output()
    contentUpdated = new EventEmitter<string>();

    ngOnInit() {
        this.contentUpdated.emit('complete');
    }
}

Here is my parent component file top-navigation.component.ts

import { SportsListComponent } from '../../sportslist/sportslist.component';

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  selector: 'app-ui-top-navigation',
  templateUrl: './top-navigation.component.html',
  styleUrls: ['./top-navigation.component.css']
}) 


export class TopNavigationComponent implements OnInit {
    get_data(event) {
        console.log('event trigger');
        console.log(event);
    }
}

My top-navigation.component.html

<app-sportslist (contentUpdated)="get_data($event)">

</app-sportslist>

This is all my code looks like, when I try build this code, I get below error on my screen -

ERROR in Template parse errors: 'app-sportslist' is not a known element: 1. If 'app-sportslist' is an Angular component, then verify that it is part of this module. 2. If 'app-sportslist' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("

[ERROR ->] "): ng:///var/www/html/budgetbet/BudgetBetWebSite/src/app/shared/top-navigation/top-navigation.component.html@419:0

I am new to express and angular, not understanding what its asking me to fix, your advise could be of much help.

Shared.module.ts

import { NgModule } from '@angular/core'; 
import { CommonModule } from '@angular/common'; 
import { TopNavigationComponent } from './top-navigation/top-navigation.component'; 
import { RouterModule } from '@angular/router';

@NgModule({   
    declarations: [
        TopNavigationComponent,
        SportsListComponent   
    ] 
}) 
export class SharedModule {}

Answer 1

Add the child component to the declarations in the module

declarations: [
    ...,
    SportsListComponent
],

Answer 2

本文帮助我了解了Angular https://medium.com/@cyrilletuzi/understanding-angular-modules-ngmodule-and-their-scopes-81e4ed6f7407

中组件的混乱导入

正如@Sachila所说，您必须在父组件模块中声明子组件。

如果它们在不同的模块中，请导出子模块并将其导入到父模块中

如果它们在同一模块中，请确保已声明两个组件。在此示例中，可能只是拼写错误，但看起来Shared.module.ts中缺少以下行

从../../sportslist/sportslist.component'导入{SportsListComponent};

但是基本结构如下：

//...imports

@NgModule({
  imports: [           
    //for modules
  ],
  providers: [   
    //for services
  ],
  declarations: [  
    //for components
  ],
  exports: [/*elements to be shared with other modules*/],
  entryComponents: [],
})

//...