Angular error: Please add a @NgModule annotation

Question

I am new to Angular and I am trying to write a simple modularized application. But I get the following error:

Uncaught Error: Unexpected directive 'SomeComponent' imported by the module 'SomeModule'. Please add a @NgModule annotation.

Basically, I do not want to import all the services and components in app.module.ts, I wanted to modularize the code and I failed.

This is the app.module.ts

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(appRoutes),
    HttpClientModule,
    ReactiveFormsModule,
    SomeModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

This is nested module:

@NgModule({
  imports: [
    CommonModule,
    SomeComponent
  ],
  providers: [SomeService],
  declarations: [],
  exports: [SomeComponent]
})
export class SomeModule {
}

This is the nested component:

@Component({
  selector: 'app-index',
  templateUrl: './some.component.html',
  styleUrls: ['./some.component.css']
})
export class SomeComponent implements OnInit {

  somes: Array<ISome>;

  constructor(private http: HttpClient, private service: SomeService) {}

  ngOnInit() {
    this.getSomes();
  }

  getSomes() {
    this.service.getSomes().subscribe(res => {
      this.somes = res;
    });
  }
}

Bummalo

Answer 1

You're trying to "import" a component in SomeModule.

imports: [
  CommonModule,
  SomeComponent
],

You import modules and declare components, which is exactly what the error message tells you -- you tried importing a directive SomeComponent.

Unexpected directive 'SomeComponent' imported by the module 'SomeModule'.

Move the SomeComponent from imports to declarations.

imports: [
  CommonModule,
],
providers: [SomeService],
declarations: [
  SomeComponent,
],

Sesquiplane

Answer 2

Move your Somecomponent to declaration part.

NgModule({
  imports: [
    CommonModule

  ],
  providers: [SomeService],
  declarations: [SomeComponent]

})
export class SomeModule {
}

Ileac

Answer 3

I faced the same issue.

I created a pipe and put it inside a module so that it can be accessible by multiple components.

What I was doing wrong?

@NgModule({
  declarations: [
    CustomDatePipe, // declarating pipe class instead of importing pipe module
  ]
})
export class AppModule { }

How to fix this issue?

import pipe-module in AppModule i.e.

@NgModule({
  imports: [
    CustomDateModule,
  ]
})
export class AppModule { }

Bacteria

Answer 4

You have to declare that component in nested module.

Try this in nested module.

@NgModule({
  imports: [
    CommonModule,
  ],
  providers: [SomeService],
  declarations: [SomeComponent],
  exports: [SomeComponent]
})
export class SomeModule {
}

Paleoclimatology

I can't really see any difference between the accepted answer and this one. This code must also work – Inconsistent