Please add a @Pipe/@Directive/@Component annotation in Angular 4

[IevhenIkonnykov]

I'm submitting a ... (check one with "x")

[ x ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

I had a completely working project on Angular 2.4.3 (used Angular cli) and moved it to Angular 4.0.1. I made it twice in a different way. First changed package.json and other necessary files. Second - created an empty project by Angular cli and copied into it my project files. In both cases I get the same error when I try to launch the app with a command ng serve:

compiler.es5.js:14577 Uncaught Error: Unexpected value 'LoadingComponent' declared by the module 'AppModule'. Please add a @Pipe/@Directive/@component annotation.
at syntaxError (http://localhost:4200/vendor.bundle.js:53165:34) []
at http://localhost:4200/vendor.bundle.js:65680:40 []
at Array.forEach (native) []
at CompileMetadataResolver.getNgModuleMetadata (http://localhost:4200/vendor.bundle.js:65662:54) []
at JitCompiler._loadModules (http://localhost:4200/vendor.bundle.js:76740:64) []
at JitCompiler.compileModuleAndComponents (http://localhost:4200/vendor.bundle.js:76699:52) []
at JitCompiler.compileModuleAsync (http://localhost:4200/vendor.bundle.js:76661:21) []
at PlatformRef.bootstrapModuleWithZone (http://localhost:4200/vendor.bundle.js:5145:25) []
at PlatformRef.bootstrapModule (http://localhost:4200/vendor.bundle.js:5131:21) []
at Object.245 (http://localhost:4200/main.bundle.js:16721:124) []
at webpack_require (http://localhost:4200/inline.bundle.js:53:30) []
at Object.776 (http://localhost:4200/main.bundle.js:45425:18) []
at webpack_require (http://localhost:4200/inline.bundle.js:53:30) []
at webpackJsonpCallback (http://localhost:4200/inline.bundle.js:24:23) []

The interesting part is that when I try to launch it with a command ng serve --aot it works.

Expected behavior

Should work as in Angular 2.4.3.

Minimal reproduction of the problem with instructions

Unfortunately it is not an open-source project.
The project is compiled successfully in WebStorm, but it cannot be launched in the browser. My settings are:
LoadingComponent is correct (at least seems to me):

import {Component, Input} from '@angular/core';
@component({
selector: 'cdp-loading',
templateUrl: './loading.component.html'
})
export class LoadingComponent {
@input() public isBusy: boolean;
}

When I remove this component it complains on another and so on.
My package.json:
{
"name": "web-services-ui",
"version": "0.1.0",
"description": "Angular2 SPA",
"license": "ISC",
"author": "Author",
"scripts": {
"ng": "ng",
"start": "ng serve --proxy-config proxy.config.json",
"build": "ng build",
"lint": "ng lint",
"test": "ng test",
"e2e": "protractor"
},
"private": true,
"dependencies": {
"@angular/common": "^4.0.0",
"@angular/compiler": "^4.0.0",
"@angular/core": "^4.0.0",
"@angular/forms": "^4.0.0",
"@angular/http": "^4.0.0",
"@angular/platform-browser": "^4.0.0",
"@angular/platform-browser-dynamic": "^4.0.0",
"@angular/platform-server": "^4.0.0",
"@angular/router": "^4.0.0",
"@angular/animations": "^4.0.0",
"core-js": "^2.4.1",
"rxjs": "^5.1.0",
"zone.js": "^0.8.4",
"primeng": "^4.0.0-rc.2",
"marked": "0.3.6",
"prismjs": "^1.6.0"
},
"devDependencies": {
"@angular/cli": "1.0.0",
"@angular/compiler-cli": "^4.0.0",
"@types/jasmine": "2.5.38",
"@types/node": "~6.0.60",
"codelyzer": "~2.0.0",
"jasmine-core": "~2.5.2",
"jasmine-spec-reporter": "~3.2.0",
"karma": "~1.4.1",
"karma-chrome-launcher": "~2.0.0",
"karma-cli": "~1.0.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"karma-coverage-istanbul-reporter": "^0.2.0",
"protractor": "~5.1.0",
"ts-node": "~2.0.0",
"tslint": "~4.5.0",
"typescript": "~2.2.0"
}
}

My AppModule:

@NgModule({
declarations: [
AppComponent,
OpenDirective,
HeaderComponent,
NavigationSiteDirectoryComponent,
NavigationComponent,
FooterComponent,
ContentComponent,
HomeComponent,
LoadingComponent,
OpenEngineeringModelModalComponent,
LogoutComponent,
ModalContainerComponent,
ModelNavigationContainerComponent,
NavigationModelComponent,
ControlSideBarComponent
],
imports: [
BrowserModule,
HttpModule,
APP_ROUTER_PROVIDERS,
FormsModule,
ReactiveFormsModule,
CommonModule,
CDP4SharedModule,
RequirementModule,
SiteDirectoryModule,
EngineeringModelModule,
RIDModule,
EngineeringModelDataNoteModule,
FileStoreModule
],
providers: [
{provide: APP_BASE_HREF, useValue: '/'},
BusyIndicatorService,
ThingUpdateService,
WebServiceClient,
CdpServicesDal,
ModelNavigationService,
UserSessionService,
SiteDirectoryResolver,
EngineeringModelResolver,
DialogService,
ValidationService,
TreeTableService,
RequirementTreeTableService,
SharedTreeTableService,
FileStoreTreeTableService,
PersonTreeTableService,
ConfigService,
{provide: APP_INITIALIZER, useFactory: initConfig, deps: [ConfigService], multi: true }
],
bootstrap: [AppComponent]
})

export class AppModule {
}

What is the motivation / use case for changing the behavior?

If this configuration worked in Angular 2.4.3 it should work in Angular 4.0.1.

Please tell us about your environment:

Windows 7 64bit, Webstorm 2016.3.3, npm 4.1.1

• Angular version: 4.0.1

• Browser: Chrome Version 57.0.2987.133 (64-bit)

• Language: Typescript 2.2.2

• Node (for AoT issues): node --version = 7.4.0

[rylek90]

We have the same issue when using ngc. It seems to work fine without it
Unexpected value 'HelloWorld in C:/git/Repo/src/WebApp/node_modules/hello-world-component/lib/hello-world.component.d.ts' declared by the module 'AppModule in C:/git/Repo/src/WebApp/scripts/app/app.module.ts'. Please add a @Pipe/@Directive/@Component annotation.

[IevhenIkonnykov]

@rylek90 Hello. Could you please elaborate a little bit what you mean "using ngc". What is ngc? You mean to exclude @angular/compiler-cli? I apologize for perhaps a stupid question, but for me it is unclear. Thank you.

[rylek90]

@IevhenIkonnykov what we did is run ngc -p ./tsconfig.json on our production builds. I don't know much about Angular because we've already started using it. From what I understand ngc used ahead-of-time compilation as defined: https://angular.io/docs/ts/latest/cookbook/aot-compiler.html

[IevhenIkonnykov]

@rylek90 Thank you for information. I tried to launch the app by ng serve and it did not work. I thought that it does not use AoT if it is not explicitly set (for example ng serve --aot). Anyway it still seems like a bug.

[rylek90]

@IevhenIkonnykov: just to clarify. When using AOT it fails during build. While standard TSC compilation passes it and then fails in runtime with exactly same message as yours.

[IevhenIkonnykov]

@rylek90 In my case as you said it fails in runtime, but passes compilation. So you have this problem in both cases with AoT and without it? Did you find anything that might help to fix it? Thank you.

[rylek90]

@IevhenIkonnykov: I don't know if it'll help. I've managed to resolve this issue. I've simply forgotten to add resolve dependencies from node_modules in webpack. Hence, in my case this issue was not related to Angular itself.
resolve: { extensions: [".ts", ".js", ".json", ".css", ".scss", ".html"], modules: [path.join(__dirname, "node_modules")] },

[IevhenIkonnykov]

Thank you. Unfortunately it is not my case, because I use angular cli, but perhaps the problem is there, but it mixed by cli.

[ciel]

I'm having this problem too and have no idea why

[tbosch]

Hello, thanks for reporting this.
However, we need a reproduction case for this. For AOT, it would be best to have a branch on Github with instructions how to reproduce. We understand that you can't publish your internal app, but it would be great if you could narrow this down to a simpler app that shows the same problem.

[ciel]

I will try. I have no idea what caused it, so I'm a bit lost on what to do. But I'll give it a try.

…

On Tue, Apr 11, 2017, 6:17 PM Tobias Bosch ***@***.***> wrote: Hello, thanks for reporting this. However, we need a reproduction case for this. For AOT, it would be best to have a branch on Github with instructions how to reproduce. We understand that you can't publish your internal app, but it would be great if you could narrow this down to a simpler app that shows the same problem. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#15890 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAavtPwEddp-cjIEgzcETEDf_5PT-Etvks5rvAn4gaJpZM4M5qH_> .

[ciel]

I posted a reproduction, but have learned something new. I am going to try it again with that new information, then post if I still have the problem.

[ciel]

Alright. Here is a full reproduction that demonstrates the problem for me.

Here is a sample that reproduces the issue. ng-cli-error

To reproduce it manually, perform the following steps;

1. Have angular-cli 1.0.0 installed.
2. Have npm-check-updates 2.10.5 installed.
3. Create a new directory. (I used ng04142017095602 in this example.)
4. Navigate to this directory in a command terminal. (I am on Windows 10 Professional)
5. Run ng new wwwroot to create a new project.
6. Navigate to the wwwroot folder. (cd wwwroot)
7. Run ng eject to create the webpack configuration.
8. Run ncu -a to perform npm-check-updates and update all packages to their latest.

At the time of this writing, the following packages were updated for me;

 @types/jasmine                     2.5.38  →   2.5.47
 @types/node                       ~6.0.60  →  ~7.0.12
 codelyzer                          ~2.0.0  →   ~2.1.1
 jasmine-spec-reporter              ~3.2.0  →   ~3.3.0
 karma                              ~1.4.1  →   ~1.6.0
 karma-coverage-istanbul-reporter   ^0.2.0  →   ^1.1.0
 ts-node                            ~2.0.0  →   ~3.0.2
 tslint                             ~4.5.0  →   ~5.1.0
 webpack-dev-server                 ~2.3.0  →   ~2.4.2
 css-loader                        ^0.26.1  →  ^0.28.0
 file-loader                       ^0.10.0  →  ^0.11.1
 less-loader                        ^2.2.3  →   ^4.0.3
 postcss-loader                    ^0.13.0  →   ^1.3.3
 postcss-url                        ^5.1.2  →   ^6.0.4
 sass-loader                        ^4.1.1  →   ^6.0.3
 source-map-loader                  ^0.1.5  →   ^0.2.1
 style-loader                      ^0.13.1  →  ^0.16.1
 stylus-loader                      ^2.4.0  →   ^3.0.1

9. Run npm install to install all the newest versions.
10. Run webpack to package the installation. You should yield the following output or similar;

C:\Users\Ciel\Documents\Visual Studio 2017\Research\angular-cli\ng04142017095602\wwwroot>webpack
Hash: d6cb6f3bfe8bca3e12d0
Version: webpack 2.2.1
Time: 13090ms
                  Asset       Size  Chunks                    Chunk Names
   styles.bundle.js.map    86.6 kB       1  [emitted]         styles
    polyfills.bundle.js     166 kB       0  [emitted]         polyfills
         main.bundle.js    6.15 kB       2  [emitted]         main
       vendor.bundle.js    2.19 MB       3  [emitted]  [big]  vendor
       inline.bundle.js    6.34 kB       4  [emitted]         inline
polyfills.bundle.js.map     203 kB       0  [emitted]         polyfills
       styles.bundle.js    70.3 kB       1  [emitted]         styles
     main.bundle.js.map    3.89 kB       2  [emitted]         main
   vendor.bundle.js.map    2.22 MB       3  [emitted]         vendor
   inline.bundle.js.map    6.66 kB       4  [emitted]         inline
            favicon.ico    5.43 kB          [emitted]
           ./index.html  610 bytes          [emitted]
   [6] ./~/@angular/core/@angular/core.es5.js 461 kB {3} [built]
  [74] ./src/main.ts 375 bytes {2} [built]
  [75] ./src/polyfills.ts 2.5 kB {0} [built]
  [76] ./src/styles.css 1.15 kB {1} [built]
  [78] ./src/app/app.module.ts 1.28 kB {2} [built]
  [79] ./src/environments/environment.ts 517 bytes {2} [built]
  [80] ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader!./src/styles.css 240 bytes {1} [built]
  [86] ./~/@angular/platform-browser-dynamic/@angular/platform-browser-dynamic.es5.js 6.03 kB {3} [built]
  [87] ./~/core-js/es6/reflect.js 717 bytes {0} [built]
  [88] ./~/core-js/es7/reflect.js 510 bytes {0} [built]
 [162] ./~/style-loader/addStyles.js 8.51 kB {1} [built]
 [164] ./~/zone.js/dist/zone.js 88.1 kB {0} [built]
 [165] multi ./src/main.ts 28 bytes {2} [built]
 [166] multi ./src/polyfills.ts 28 bytes {0} [built]
 [167] multi ./src/styles.css 28 bytes {1} [built]
    + 153 hidden modules

WARNING in ./~/@angular/compiler/@angular/compiler.es5.js
Cannot find source file 'compiler.es5.ts': Error: Can't resolve './compiler.es5.ts' in 'C:\Users\Ciel\Documents\Visual Studio 2017\Research\angular-cli\ng04142
017095602\wwwroot\node_modules\@angular\compiler\@angular'
 @ ./~/@angular/platform-browser-dynamic/@angular/platform-browser-dynamic.es5.js 11:0-72
 @ ./src/main.ts
 @ multi ./src/main.ts
Child html-webpack-plugin for "index.html":
       [0] ./~/html-webpack-plugin/lib/loader.js!./src/index.html 341 bytes {0} [built]

ADDITIONAL INFORMATION

    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
@angular/cli: 1.0.0
node: 6.10.2
os: win32 x64

npm --version is 3.10.10.
webpack --version is 2.3.3
tsc --version is 2.2.2
ng --version is 1.0.0

[helzgate]

Is this the same issue as #15763? Where 3rd party libraries are causing these errors?

[IevhenIkonnykov]

Hello. In my case I do not have side libraries except PrimeNG, but it requires Angular 4. I also have a couple of JavaScript libraries, but they are not the cause. I really cannot find what the cause of this error is and it is even more frustrating, because it works in AoT mode.

[helzgate]

My issue was related to the DLLReferencePlugin in Webpack. I had to clean my dll directory and rebuild them.

[MortenSkjoldager]

I'm trying to combine es5 and Typescript like this as i'm trying to build a plugin mechanism. It ends up in the same error. Why is this not possible?

//extension
var HelloWorldComponent = function () {
    
};
  
HelloWorldComponent.annotations = [
    new ng.core.Component({
        selector: 'hello-world',
        template: '<h1>Hello World!</h1>',
    })
];

window["app"].componentsLazyImport.push(HelloWorldComponent);`

//parts.module.ts
for (let component of window["app"].componentsLazyImport) {
    DYNAMIC_DIRECTIVES.push(forwardRef(() => component));
}

@NgModule({
  imports: window["app"].modulesImport,
  declarations: [
      DYNAMIC_DIRECTIVES,
  ],
  exports: [
      DYNAMIC_DIRECTIVES,
      window["app"].modulesImport,
  ]
})
export class PartsModule {

    static forRoot()
    {
        return {
            ngModule: PartsModule,
            providers: [ ], // not used here, but if singleton needed
        };
    }
}

[BorntraegerMarc]

any update on this?

[born2net]

I saw this error when I added a component to the modules instead of declarations by mistake, check your code.

[IevhenIkonnykov]

For now I stay on Angular 2.4.3, because I did not find a way to eradicate this issue. Perhaps I will try to move to Angular 4 later.

[BorntraegerMarc]

@IevhenIkonnykov have you verified this issue on multiple computers? Or is it only when using a special combination of components?

My guess is that it only happens in very specific cases, right? Else I guess there would be quite the big fuss around it...

[IevhenIkonnykov]

Perhaps it is a specific issue on my computer. I will try to do the same on another one, but I believe that it is something peculiar in one of the components. The most frustrating thing that it works with AoT and majority of Angular errors are not very expressive.

[moorthi07]

It works perfect with ng serve! BUT,
If I try,
ng build --prod
I get this error:
ERROR in Unexpected value 'AceEditorDirective in C:/dpdtest/node_modules/ng2-ace/index.js' declared by the module 'codeuiModule in C:/dpdtest/public/app/eui.module.ts'. Please add a @Pipe/@Directive/@component annotation.

ERROR in ./public/main.ts
Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in 'C:\dpdtest\public'
@ ./public/main.ts 5:0-74
@ multi ./public/main.ts

[tzachov]

Running ng serve --e=dev -t=production solved it for me and I can reproduce the problem when I run ng serve --e=dev -t=development so this seem to be a problem with build target.

I couldn't find what's affected by changing target.

EDIT:
Just noticed AoT is true by default when targeting production so I'm guessing running ng serve --aot is also a workaround...

[IevhenIkonnykov]

@tzachov Your solution ng serve --e=dev -t=production works for me. Thanks a lot. But the question is why it happens? What might be the reason especially when it works fine in Angular 2?

[jratiwanich]

I have the same problem using either of these commands:
ng serve --e=dev -t=production
or
ng build --aot
or
"node_modules/.bin/ngc" -p tsconfig.aot.json

I can run the normal ng serve or ng build commands just fine. Only when compile in AOT mode, i'm getting the error below.

ERROR in Unexpected value 'HelloWorldComponent
in /../hellolib/HelloWorld.component.d.ts'
declared by the module 'AppModule in /../TestHello/src/app/app.module.ts'.
Please add a @Pipe/@Directive/@component annotation.

ERROR in ./src/main.ts
Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in
'/../TestHello/src'
@ ./src/main.ts 4:0-74
@ multi ./src/main.ts

[iqmeta]

Same here, we trying to use a shared lib which was minified and compiled with gulp typescript (annotations removed) and ts files for references are included.

Everytime we try to ng build --prod => Please add a @Pipe/@Directive/@component annotation

Everything works fine, with ng build, etc.
Is it possible to skip/ignore some errors for certain files?

[linhuiw]

I Fixed this error through fix default exports.

reference: https://github.com/rangle/angular-2-aot-sandbox#default-exports-top

[PhiNguyen1991]

I'm not sure my solution will correct your issue, but i think you should try to re-order import libs on top of file.

[itacolomymariano]

IONIC/ANGULAR: I had the same error, but I solved change my app.module.ts I did the following.

import {HttpModule} from '@angular/http';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
declarations: [
MyApp,
AboutPage,
ContactPage,
HomePage,
TabsPage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
FeedPageModule,
IntroPageModule,
HttpModule,
HttpClientModule

],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
AboutPage,
ContactPage,
HomePage,
TabsPage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})

[itacolomymariano]

IONIC/ANGULAR: I had the same error, but I solved change my app.module.ts I did the following.

import {HttpModule} from '@angular/http';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
declarations: [
MyApp,
AboutPage,
ContactPage,
HomePage,
TabsPage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
FeedPageModule,
IntroPageModule,
HttpModule,
HttpClientModule

],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
AboutPage,
ContactPage,
HomePage,
TabsPage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})

[bevlison]

I just experienced the error for the first time, did not find an answer here. Found the answer in my case :
It was an error in the blabla.component.ts file :
two 'export class ' rules, the wrong one was a temporary 'model' definition, which I moved into another file (blabla.model.ts), after that the error 'Please add a @Pipe/@Directive/@component annotation ' appearing in the app.module.file, concerning blabla.component, disappeared.

[rahulsetia25]

I am Facing Same Issues

Unexpected value 'ImgMapComponent in /opt/lampp/htdocs/Survey_angular/Survey_new_14_feb/survey/node_modules/ng2-img-map/ng2-img-map.d.ts' declared by the module 'AppModule in /opt/lampp/htdocs/Survey_angular/Survey_new_14_feb/survey/src/app/app.module.ts'. Please add a @Pipe/@Directive/@component annotation.

[Saphora]

I had also this problem and in my case it was that i had to add an @ tot the component decorator in my component. It was in some obscure way disappeared.

[jabalmarouane]

I saw this error when I added a component to the modules instead of declarations

[davidsheardown]

Don't know if this is still active/open however, for my use-case I had done the following:

AppModule.ts

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent,
    AddComponent,
    QueryComponent,
   HttpClientModule
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule
  ],
  providers: [
    QueryService
  ],
  bootstrap: [AppComponent]
})

The error of course was to include **HttpClientModule** in the declarations!

[aditya478492]

In my case, I forgot to put "@" before Component. Then this error showed up.

[pkozlowski-opensource]

The originally reported issue was solved. This issue starts to accumulate info about unrelated errors and it is no longer serving its purpose so I'm going to close it.

If anyone faces this error in the future please open a new issue following our issue template. Thnx!

[jeystaats]

I had the same as @aditya478492 , I forgot to add the @ to the Component .

[Anietex]

I had the same issue, i mistakenly added semi-colon after @Component({}) , @Component({}); instead of @Component({})

[avishal]

Occurred this what can I do?

Uncaught Error: Unexpected module 'FormsModule' declared by the module 'AppModule'. Please add a @Pipe/@Directive/@component annotation.

[dody87]

Maybe it's a stupid answer but i have the same issue in a code like this:

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

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

class Category{
  style:string
  short:string
  long:string
}

const CATEGORIES: Category[] = [
  {
    style:'warning',
    short:'1st',
    long:'1st place'
  }
]

class Winner{
  constructor(catId:number,name:string,rate:number,uid:string,sid:string,email:string,link:string){
    this.name = name
    this.rate = rate
    this.uid = uid
    this.sid = sid
    this.email = email
    this.cat = CATEGORIES[catId]
    this.link = link
  }
  cat:Category
  name:string
  rate:number
  uid:string
  sid:string
  email:string
  link:string
}

export class WinnersComponent implements OnInit {
  winners:Winner[]

  constructor() {}

  ngOnInit() {
    this.winners = [
      new Winner(0,'dody',10,'32132','adad1231','rodrigo.ruizdiaz@reingenio.com.ar','youtube.com')
    ]
  }

}

Then i just moved '@component' section code near to the exported component and it works.

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

class Category{
  style:string
  short:string
  long:string
}

const CATEGORIES: Category[] = [
  {
    style:'warning',
    short:'1st',
    long:'1st place'
  }
]

class Winner{
  constructor(catId:number,name:string,rate:number,uid:string,sid:string,email:string,link:string){
    this.name = name
    this.rate = rate
    this.uid = uid
    this.sid = sid
    this.email = email
    this.cat = CATEGORIES[catId]
    this.link = link
  }
  cat:Category
  name:string
  rate:number
  uid:string
  sid:string
  email:string
  link:string
}

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

export class WinnersComponent implements OnInit {
  winners:Winner[]

  constructor() {}

  ngOnInit() {
    this.winners = [
      new Winner(0,'',10,'32132','adad1231','','youtube.com')
    ]
  }

}

[arshitabinda]

i was getting this error when i declared another class in my component just after the component annotation (@component), so module was not able to recognize the component which i declared in declaration.
Keeping the second class after my component class, fixed my issue.

[swanidhi]

I faced a similar error. Later realised that it was because I had declared the const outside the component class. Putting them inside the class as public variables resolved the issue.

[bmshamsnahid]

In my case, I forgot to put "@" before Component. Then this error showed up.

Same issue for me, Forgot the @

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}