40

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

4 Answers 4

65

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

Move your Somecomponent to declaration part.

NgModule({
  imports: [
    CommonModule

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

})
export class SomeModule {
}
4

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 { }
1

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 {
}
1
  • 1
    I can't really see any difference between the accepted answer and this one. This code must also work
    – xrobert35
    Sep 20, 2018 at 6:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.