Angular – How to fix: The class is listed in the declarations of the NgModule ‘AppModule’, but is not a directive, a component, or a pipe

How to reproduce it

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

@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
  styleUrls: [ './product-list.component.css' ]
})

interface Product {
  id: number;
  name: string;
  price: number;
  description: string;
}

export class ProductListComponent {

  products: Product[] = [];
  ...
}

Error

error TS1206: Decorators are not valid here.   

The class 'ProductListComponent' is listed in the declarations of the NgModule 'AppModule', but is not a directive, a component, or a pipe. Either remove it from the NgModule's declarations, or add an appropriate Angular decorator.

Solution

@Component decorator must be before the class definition.

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

interface Product {
  id: number;
  name: string;
  price: number;
  description: string;
}

@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
  styleUrls: [ './product-list.component.css' ]
})

export class ProductListComponent {

  products: Product[] = [];
  ...
}

• Share on Facebook