Angular: Uncaught Error: Component BucketGridComponent is not part of any NgModule or the module has not been imported into your module

Question

I am running into an issue with adding a component to my app. Based on what I read and seen so far Angular will load all xx.module.ts files on startup. So I have a app.module.ts which has the main stuff but now I have a component called bucket-grid.component which I would like to use in my app. To do so I created a bucket-grid.module.ts so I can access it in my routes etc.

This is what the module looks like:

import { NgModule } from '@angular/core';
import { IgxListModule, IgxExpansionPanelModule } from 'igniteui-angular';
import { FilterModule } from '../../modules/filter/filter.module';
import { BucketGridComponent } from './components/bucket-grid/bucket-grid.component';


@NgModule({
  declarations: [
    BucketGridComponent
  ],
  imports: [
    IgxListModule,
    IgxExpansionPanelModule,
    FilterModule,
    ],
  exports: [
    BucketGridComponent,

  ],
})
export class BucketGridModule { }

When I start my app I get the error:

Uncaught Error: Component BucketGridComponent is not part of any NgModule or the module has not been imported into your module.

Is there anything I am missing? Do I need to register the module somewhere?

Answer 1

You do need to 'register' the module somewhere. You have to add BucketGridModule to your app.module.ts file as an import . The AppModule is the root module for your application. Your other modules should be imported by this one.

 @NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
    BucketGridModule
    ],
  exports: [
    ...
  ],
})
export class AppModule { }