Uncaught Error:Template parse errors: product is not a known element: - angular2-template

Question

I recently started learning angular2. trying to develop small application while learning from online tutorials. I am facing an error saying,
Uncaught Error: Template parse errors: 'product' is not a known element:
1. If 'product' 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.
ng:///AppModule/AppComponent.html#9:13
My app.component.ts (in folder app)
import { Component } from '#angular/core';
#Component({
selector: 'app-root',
template: `<product></product>`
})
export class AppComponent {
userText: string = 'Good Afternoon';
}
My app.module.ts (in folder app)
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { RouterModule, Routes } from '#angular/router';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
#NgModule({
imports: [BrowserModule, FormsModule, HttpModule,
RouterModule.forRoot(appRoutes)],
declarations: [AppComponent, HomeComponent],
bootstrap: [AppComponent],
providers: [EmployeeService]
})
export class AppModule { }
home.component.ts (in home folder)
import { Component } from '#angular/core';
#Component({
selector: 'product',
templateUrl: './home.component.html'
})
export class HomeComponent {
title = 'Welcome!';
}
I wanted to create html page in home.component.html (in home folder) and linked it by templateUrl in home.component.ts, and with the help of selector "product"
I want to put it in display by binding with app.component.ts (in app folder).
Please help me to solve this issue.
Thank you.