When i create a form angular2 error is show cannot find name "product"?

First of all i am a learner of angular 2
I am follow to this link https://www.tutorialspoint.com/angular2/angular2_forms.htm I have created to all These file and code.

first file name 'products.ts' code :-

export class Product { constructor ( public productid: number, public productname: string ,

) { } }

• second file name 'product-form.component.ts' code :-

      import { Component } from '@angular/core';
      import { IProduct } from './products';
      import { ProductService } from '../products.service';
  
      @Component ({
         selector: 'product-form',
         templateUrl: './DEMO/product-form.component.html'
      })
  
      export class ProductFormComponent {
         model = new Product(2,'ProductA');
      }
  

thread file name

'product-form.component.html' code :-

    <div class = "container">
        <h1>Product Form</h1>
        <form>
           <div class = "form-group">
              <label for = "productid">ID</label>
              <input type = "text" class = "form-control" id = "productid" required
                 [(ngModel)] = "model.productid" name = "id">
           </div>

           <div class = "form-group">
              <label for = "name">Name</label>
              <input type = "text" class = "form-control" id = "name"
                 [(ngModel)] = "model.productname" name = "name">
           </div>
        </form>
     </div>

• Now when i run URL http://localhost:4200/
• Cannot GET / blank page show on browser
• Visual Studio Code editor problem error is show 'cannot find name "product"'