CODEWITHSUNDEEP
angularcomponentsshared
Jay
Jay

Reputation: 339

Angular 2 shared component error

I created a component to be shared by multiple other components. I declared the common component into Module A, it worked fine. I went and did the same in Module B, I got this error.

Type PagerComponent is part of the declarations of 2 modules: ModuleA and ModuleB! Please consider moving PagerComponent to a higher module that imports ModuleA and ModuleB. You can also create a new NgModule that exports and includes PagerComponent then import that NgModule in ModuleA and ModuleB.

So then I created a Pager Module (NgModule).

import { NgModule } from '@angular/core'; 
import { PagerComponent } from '../shared/pager.component';

@NgModule({
    imports: [ 
        PagerComponent
    ]
})
export class PagerModule {}

I then imported this new module into ModuleA and Module B. I get error:

Uncaught Error: Unexpected value 'undefined' imported by the module 'PagerModule'

This error is not telling me what is wrong. Any ideas?

Upvotes: 0

Views: 637

Answers (1)

embarq
embarq

Reputation: 335

I see the issue with your NgModule declaration. Thanks to NgModule structure you cannot pass anything other than NgModule's in to imports field. In your case you need to pass PagerComponent to declarations and exports fields of module.

In declarations you, obviously, declare your components, pipes and directives. Also you need to pass those into exports section in order to make them "visible" for other components in the target module

E.g.

import { NgModule } from '@angular/core'; 
import { CommonModule } from '@angular/common';
import { PagerComponent } from '../shared/pager.component';

@NgModule({
    imports: [ CommonModule ],
    declarations: [ PagerComponent ],
    exports: [ PagerComponent ]
})
export class PagerModule {}

Upvotes: 1

Related Questions