Typescript - Error TS1206 Decorators are not Valid here

Question

I really need a help, I can not at all run my app FRONT END, a company project, when I give a npm start on my terminal in visual code, a blessed error persists, which is on @Component saying Error TS1206 Decorators are not Valid here. Below is the code, I’m starting in TYPESCRIPT and ANGULAR 6.

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

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

export interface LineBusiness {
  value: number;
  viewValue: string;
}

export class SelectLineBusiness {
  business: LineBusiness[] = [
    {value: 0, viewValue: 'Carro'},
    {value: 1, viewValue: 'Carga'},
    {value: 2, viewValue: 'Carro reserva'},
    {value: 2, viewValue: 'RE'}
  ];
}

export class ServicesMonitoringComponent implements OnInit {

  constructor() { 

  }

  ngOnInit() {

  }
}

The excerpt is in @Component, in my folder structure, as drawn below:

How do I fix this? And run my application? Because the file Servicesmonitoring.component.scss is empty, this has to do with the problem?

Thank you

Answer 1

Annotation of @Component has to be on top of the class of its component and not on top of a template interface..

@Component({
  selector: 'app-ServicesMonitoring',
  templateUrl: './ServicesMonitoring.component.html',
  styleUrls: ['./ServicesMonitoring.component.scss']
})
export class ServicesMonitoringComponent implements OnInit {

  constructor() { 

  }

  ngOnInit() {

  }
}