Когда я создаю форму, отображается ошибка angular2, не удается найти название продукта?

Прежде всего, я изучаю angular 2. Я перехожу по этой ссылке https://www.tutorialspoint.com/angular2/angular2_forms.htm Я создал для всех эти файлы и код.

код первого имени файла 'products.ts': -

экспортный класс Продукт {конструктор (общедоступный продукт: число, общедоступное имя продукта: строка,

) { } }

• код второго имени файла 'product-form.component.ts': -

      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');
      }
  

имя файла потока

Код 'product-form.component.html': -

    <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/
• Невозможно ПОЛУЧИТЬ / пустая страница отображается в браузере
• Ошибка проблемы редактора кода Visual Studio: "не удается найти имя" продукт "