Please add a Pipe Directive Component annotation Error

Question

I am stuck in a situation here  I am getting an error like this     compiler es5 js 1694 Uncaught Error  Unexpected value  LoginComponent  declared by the module  AppModule   Please add a  Pipe  Directive  Component annotation      at syntaxError  compiler es5 js 1694      at compiler es5 js 15595     at Array forEach   lt anonymous gt       at CompileMetadataResolver webpackJsonp          compiler  angular compiler es5 js CompileMetadataResolver getNgModuleMetadata  compiler es5 js 15577      at JitCompiler webpackJsonp          compiler  angular compiler es5 js JitCompiler  loadModules  compiler es5 js 26965      at JitCompiler webpackJsonp          compiler  angular compiler es5 js JitCompiler  compileModuleAndComponents  compiler es5 js 26938      at JitCompiler webpackJsonp          compiler  angular compiler es5 js JitCompiler compileModuleAsync  compiler es5 js 26867      at PlatformRef  webpackJsonp          core  angular core es5 js PlatformRef   bootstrapModuleWithZone  core es5 js 4536      at PlatformRef  webpackJsonp          core  angular core es5 js PlatformRef  bootstrapModule  core es5 js 4522      at Object                src main ts  main ts 11    My Login Component Looks like this  import   Component   from   angular Core     Component       selector  login-component       templateUrl    login component html      export class LoginComponent     app module ts  import   BrowserModule   from   angular platform-browser   import   NgModule   from   angular core   import   FormsModule   from   angular forms   import   CommonModule   from   angular common  import   HttpModule   from   angular http   import   ReactiveFormsModule  from   angular forms   import   RouterModule  Routes   from   angular router   import   AppComponent   from    main app component    import  LoginComponent  from    login login component     const appRoutes  Routes        path     redirectTo  login   pathMatch  full        path   home   component  AppComponent        path   login   component  LoginComponent        NgModule     imports        BrowserModule      RouterModule forRoot appRoutes          declarations        AppComponent      LoginComponent        providers        bootstrap   AppComponent     export class AppModule       I got this error when I try to import LoginComponent into declaration  Am I missing something here

User · Answer

Another solution is below way and It was my fault that when happened I put HomeService in declaration section in app.module.ts whereas I should put HomeService in Providers section that as you see below HomeService in declaration:[] is not in a correct place and HomeService is in Providers :[] section in a correct place that should be.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule  } from '@angular/core';
import { HttpModule } from '@angular/http';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './components/home/home.component'; 
import { HomeService } from './components/home/home.service';


@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,  
    HomeService // You will get error here
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule
  ],
  providers: [
    HomeService // Right place to set HomeService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

hope this help you.

User · Answer

In my case  I accidentally added the package in the declaration but it should be in imports

User · Answer

The Above error occurs if any wrong import done  For example sometimes Service files may be added in TestBed configureTestingModule  And also while importing Material component for example import from  import  MatDialogModule  from   angular material dialog    not from  import  MatDialogModule  from   angular material

User · Answer

If you are exporting another class in that module  make sure that it is not in between  Component and your ClassComponent  For example    Component           export class ExampleClass    export class ComponentClass    -- gt  this will give this error    FIX   export class ExampleClass     Component            export class ComponentClass

User · Answer

In my case I mistakenly added this   Component       selector   app-some-item       templateUrl     some-item component html       styleUrls      some-item component scss        providers   ConfirmationService      declare var configuration  any   while the correct form is  declare var configuration  any    Component       selector   app-some-item       templateUrl     some-item component html       styleUrls      some-item component scss        providers   ConfirmationService

User · Answer

I was trying to use BrowserModule in a shared module  import and export   That was not allowed so instead I had to use the CommonModule instead and it worked

User · Answer

I faced the same error when I used another class instead of component down the component decorator      Component class must come just after the component decorator      Component    selector   app-smsgtrecon    templateUrl     smsgtrecon component html    styleUrls      smsgtrecon component css     providers   ChecklistDatabase           THIS CAUSE ISSUE MOVE THIS UP TO COMPONENT DECORATOR       Node for to-do item     export class TodoItemNode    children  TodoItemNode     item  string       export class SmsgtreconComponent implements OnInit     After moving TodoItemNode to the top of component decorator it worked  Solution     THIS CAUSE ISSUE MOVE THIS UP TO COMPONENT DECORATOR       Node for to-do item     export class TodoItemNode    children  TodoItemNode     item  string       Component    selector   app-smsgtrecon    templateUrl     smsgtrecon component html    styleUrls      smsgtrecon component css     providers   ChecklistDatabase         export class SmsgtreconComponent implements OnInit

User · Answer

You have a typo in the import in your LoginComponent s file  import   Component   from   angular Core    It s lowercase c  not uppercase  import   Component   from   angular core

User · Answer

Not a solution to the concrete example above  but there may be many reasons why you get this error message  I got it when I accidentally added a shared module to the module declarations list and not to imports   In app module ts   import   SharedModule   from    modules shared shared module     NgModule     declarations            Should not have been added here           imports         SharedModule

User · Answer

You get this error when you wrongly add shared service to  declaration  in your appmodules instead of adding it to  provider

User · Answer

I had a component declared without the styleUrls property  like this     Component       selector   app-server       templateUrl     server component html       instead of     Component       selector   app-server       templateUrl     server component html       styleUrls      server component css        Adding in the styleUrls property solved the issue

[angular] Please add a @Pipe/@Directive/@Component annotation. Error

Examples related to angular

Examples related to angular2-template