как решить ошибку HostResourceResolver в angular?

Question

Я учусь angular, я следил за курсом, но эта ошибка произошла. Я не могу ее решить.

Это мой первый раз angular

Ошибка

**ERROR in HostResourceResolver: could not resolve ./product-list.compoment.html in context of /home/user/angular/Angular-GettingStarted/APM-Start/src/app/products/product-list.component.ts)**

app.component.ts

    import { Component } from '@angular/core';
    @Component({
      selector: 'pm-root',
      template: `
        <div><h1> {{ pageTitle }} </h1>
          <pm-products></pm-products>
        </div>
      `
    })

    export class AppComponent{
      pageTitle: string = 'Acme Product Management'
    }

app.module.ts

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

    import { AppComponent } from './app.component';
    import { ProductListComponent } from './products/product-list.component';

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

product-list.component.ts

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

    @Component({
        selector: 'pm-products',
        templateUrl: './product-list.compoment.html'
    })

    export class ProductListComponent{
        pageTitle: string = 'Product List';
    } 

Я пытался изменить

   @Component({
        selector: 'pm-products',
        templateUrl: './product-list.compoment.html' 

      // to

      //    templateUrl: '.products/product-list.compoment.html' to

    })