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 (<anonymous>)
    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.

andersh · Answer 1 · 2019-06-09T17:30:24.843

92

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
  ],

edited Jun 09 '19 at 17:30

answered Nov 27 '18 at 07:46

andersh

8,105
6
39
30

3

Similarly, I got this error when I had accidentally pasted the name of one of my Angular app's services into the `declarations` array. (It should have only been in the `providers` array further down in the file.) – Mason May 31 '19 at 02:32

score 21 · Answer 2 · edited Jul 05 '19 at 20:17

21

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{}  --> this will give this error.

FIX:

export class ExampleClass{}

@Component ({ ... })

export class ComponentClass{}

edited Jul 05 '19 at 20:17

brasofilo

25,496
15
91
179

answered Jul 05 '19 at 19:59

Victor Valeanu

398
6
20

score 18 · Accepted Answer · edited Aug 20 '21 at 15:11

18

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';

edited Aug 20 '21 at 15:11

Koray Tugay

22,894
45
188
319

answered Oct 03 '17 at 17:09

Trash Can

6,608
5
24
38

2

i have used lowercase still same issue – Kumaresan Sd Jan 27 '20 at 11:41
"Component" with capital case C is mandatory now. Small case not allowed. – Praveen Patel G Oct 12 '20 at 03:18
@Praveen Patel What? Decorator `Component` never had lowercase **c** – Trash Can Oct 12 '20 at 08:02
I don't know in past versions, I am using Angular 10. In this it will through error if it is in small case. – Praveen Patel G Oct 15 '20 at 19:32

score 11 · Answer 4 · answered Sep 20 '19 at 15:54

11

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

answered Sep 20 '19 at 15:54

trustidkid

577
4
6

2

If you get this when doing shallow testing of spec.ts files in angular, this is the correct answer! check your imports, for me it was the RouterTestingModule in the declarations instead of imports! – AFM-Horizon Dec 13 '20 at 13:51

score 6 · Answer 5 · answered Feb 27 '20 at 20:20

6

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

answered Feb 27 '20 at 20:20

Abel Tilahun

1,705
1
16
25

score 5 · Answer 6 · answered Dec 17 '19 at 07:53

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.

score 3 · Answer 7 · answered Jan 31 '20 at 13:07

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 {

score 2 · Answer 8 · answered Jan 25 '19 at 12:31

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.

Leniel Maccaferri · Answer 9 · 2020-09-21T18:45:17.143

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]
})

score 2 · Answer 10 · answered May 18 '21 at 12:21

2

I got this error when I mistakenly added a service to the declarations section in app.module.ts

answered May 18 '21 at 12:21

mamashare

399
4
10

score 1 · Answer 11 · edited Nov 02 '18 at 12:04

1

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'

edited Nov 02 '18 at 12:04

Manos Pasgiannis

1,693
1
18
30

answered Oct 24 '18 at 03:04

harshith hanthur manjunath

11
2

Format your answer – JPRLCol Oct 24 '18 at 03:14

score 1 · Answer 12 · answered Nov 10 '20 at 09:17

1

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.

answered Nov 10 '20 at 09:17

Robert

2,357
4
25
46

score 1 · Answer 13 · answered Aug 20 '21 at 15:10

1

I hate this, but restarting ng serve worked for me. It might be because I created new folders and files in my project, and angular-cli did not detect them.

answered Aug 20 '21 at 15:10

Alex Mougenet

213
3
20

Yaroslav Larin · Answer 14 · 2022-12-06T18:15:16.040

1

One of the possible reasons is exporting your component from ts file that doesn't have .component. suffix. file name should be component-name.component.ts. component-name.ts will produce this error

edited Dec 06 '22 at 18:15

answered Nov 11 '22 at 18:26

Yaroslav Larin

209
2
6

Please add a @Pipe/@Directive/@Component annotation. Error

14 Answers14

Linked