Error: Unexpected value 'SocialmediaFeedComponent' declared by the module 'AppModule'. Please add a @Pipe/@Directive/@Component annotation

Question

I get an error in my angular project. I checked the web and as far as I know, I declared every Component and Module correctly.

Error: Unexpected value 'SocialmediaFeedComponent' declared by the module 'AppModule'. Please add a @Pipe/@Directive/@Component annotation.

app.component.ts:

import { FormsModule } from '@angular/forms';

...;
import { SocialmediaComponent } from './socialmedia/socialmedia.component';
import { SocialmediaFeedComponent } from './socialmedia-feed/socialmedia-feed.component';
...;


import { CountdownModule } from 'ngx-countdown';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

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




@NgModule({
  declarations: [
    ...,
    SocialmediaComponent,
    SocialmediaFeedComponent,
    ...,
  ],
  imports: [
    BrowserModule,
    CountdownModule,
    FormsModule,
    NgbModule,
  ],
  providers: [
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

socialmedia-feed.component.ts:

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

import * as Collections from 'typescript-collections';

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

class PostSocialmediaFeedComponent {

  constructor(url: string, date: Date, type: string) { }

  date: Date;
  url: string;
  type: string;

  getDate() {
    return this.date;
  }

  getURL() {
    return this.url;
  }

  getType() {
    return this.type;
  }
}

export class SocialmediaFeedComponent implements OnInit {



  constructor() {
    this.getLatestPosts();
   }

  ngOnInit() {
  }
      // METHODS TO SORT, MERGE, GET POSTS FROM SOCIALMEDIA

      // ...

      // ...
}

Answer 1

As I can see you are missing @Component decorator above your class declaration. Try to add @Component keyword directly above your class.

Something like:

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



  constructor() {
    this.getLatestPosts();
   }

  ngOnInit() {
  }
      // METHODS TO SORT, MERGE, GET POSTS FROM SOCIALMEDIA

      // ...

      // ...
}

You can find more details in official docs here