Angular 8点击routerLink触发断言错误，寻求解决方案

点击配置好routerLink的链接时，Google控制台抛出如下错误：

Error: ASSERTION ERROR: Provided Component class doesn't contain Component definition. Please check whether provided class has @Component decorator. [Expected=> null != null <=Actual]

编译过程无报错，谷歌搜索未找到解决方案，以下是相关代码文件：

app.module.ts #

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { ProductList, ProductListComponent } from './product/product-list.component'
import { Comment } from '@angular/compiler';
import { ConvertToSpacesPipe } from './shared/convert-to-spaces.pipe';
import { starComponent } from './shared/star.component';
import { HttpClientModule } from '@angular/common/http';
import { ProductDetailComponent } from './product/product-detail.component'
import { WelcomeComponent } from './home/welcome.component';
import { RouterModule } from '@angular/router';

@NgModule({
  declarations: [
    AppComponent,
    ProductList,
    ConvertToSpacesPipe,
    starComponent,
    ProductDetailComponent,
    WelcomeComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    RouterModule.forRoot([
      {path: 'products', component: ProductListComponent},
      {path: 'products/:id', component: ProductDetailComponent},
      {path: 'welcome', component: WelcomeComponent},
      {path: '', redirectTo: '/welcome', pathMatch: 'full'},
      {path: '**', redirectTo: 'welcome', pathMatch: 'full'}
    ])
  ],
  bootstrap: [AppComponent],
  exports: [
    RouterModule,
  ],
})
export class AppModule { }

product-list.component.ts #

import { Component, OnDestroy, OnInit } from "@angular/core";
import { IProduct } from "./product";
import { ConvertToSpacesPipe } from "../shared/convert-to-spaces.pipe";
import { ProductService } from "./product.service";
import { Subscription } from "rxjs";

@Component({
    templateUrl: './product-list.component.html',
    styleUrls: ['./product-list.component.css']
  })
export class ProductList implements OnInit, OnDestroy {

  constructor(private productService: ProductService) {

  }
    pageTitle: string = 'Product list Rating';
    imageWidth: number = 50;
    imageMargin: number = 2;
    showImage: boolean = true;
    errormsg: string = `err`;
    sub!: Subscription;
    private _listFilter : string = '' ;
    get listFilter(): string {
      return this._listFilter;
    }
    set listFilter(value: string) {
      this._listFilter = value;
      this.filteredProducts = this.preformFilter(value);
    }
    filteredProducts: IProduct[] = [];
    products: IProduct[] = [];
    toggleImage(): void {
        this.showImage = !this.showImage;
    }
    ngOnInit(): void {
      this.sub = this.productService.getProducts().subscribe({
        next: products => {
          this.products = products;
          this.filteredProducts = this.products;
        },
        error: err => this.errormsg = err,

      });
      
      this.listFilter = '';
      this.startup();
    }
    ngOnDestroy(): void {
      this.sub.unsubscribe();
    }
    startup(): void {
      if (this.showImage) {
        console.log('tråd'); 
      }
      if (!this.showImage) {
        console.log('Show Image')
      }
    }
    preformFilter(filteredBy : string): IProduct[] {
      filteredBy = filteredBy.toLocaleLowerCase();
      return this.products.filter((product: IProduct) => 
      product.productName.toLocaleLowerCase().includes(filteredBy));
    }
    onRatingClicked(message : string): void {
      this.pageTitle = 'Product list Rating ' + message;
    }   
};
export class ProductListComponent {
  onNotify(messeges : string ): void {
    console.log('shit')
  }
};

app.component.ts #

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

@Component({
  selector: 'pm-root',
  template: `<nav class="navbar navbar-expand navbar-light bg-light">
    <a class="navbar-brand">{{pageTitle}}</a>
    <ul class='nav nav-pills'>
      <li><a class="nav-link" routerLink='/welcome' routerLinkActive="active">Home</a></li>
      <li><a class="nav-link" routerLink='/products' routerLinkActive="active">Product list</a></li>
    </ul>
  </nav>
  <div class="container">
  <router-outlet></router-outlet>
  </div>`
})
export class AppComponent {
  pageTitle: string = 'Acme Project Mangement';
}

welcome.component.ts #

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

@Component({
  templateUrl: './welcome.component.html'
})
export class WelcomeComponent {
  public pageTitle = 'Welcome';
}

我依赖Angular技术进行学习和未来发展，恳请帮忙解决该问题，非常感谢。

解决方案 #

问题根源在于路由配置中使用了未添加@Component装饰器的ProductListComponent类，正确做法是将app.module.ts路由配置里的：

{path: 'products', component: ProductListComponent}

改为：

{path: 'products', component: ProductList}

内容的提问来源于stack exchange，提问作者user2631359