Shared component not working when imported into lazy loading module

Question

I am trying to load one shared component inside my lazy loaded module. module. My lazy module imports the SharedModule like that:

// LazyModule

@NgModule({
    imports: [
      CommonModule,
      SharedModule,
      RouterModule.forChild(routes)
    ],
    declarations: [
      LazyParentComponent
    ]
})

Inside my SharedModule, I am importing the Angular material components that I need for the MenuComponent which I export as a shared component:

//SharedModule

@NgModule({
  imports: [CommonModule],
  declarations: [MenuComponent],
  exports: [
    MatButtonModule,
    MatSelectModule,
    MatInputModule,
    MatOptionModule,
    MatToolbarModule,
    MenuComponent
  ]
})

Then in my LazyParentComponent I am using <app-menu></app-menu> which should render the MenuComponent, which I include in the sharedModule.

But if I start this, I always get a lot of errors like Can't bind to 'value' since it isn't a known property of 'mat-select'. or 'mat-toolbar' is not a known element.

It does however work, if I don't use <app-menu></app-menu> but instead use the MatButtons from the MatButtonModule directly.

inside the shared module do you add the components to both declarations and exports? — omer
– omer, Commented Nov 14, 2018 at 21:17
I didn't include them in the descriptions but I just saw, that some of the errors go away if I include them in the imports (It's also done like that in the app.module.ts) — Fabio ha
– Fabio ha, Commented Nov 14, 2018 at 21:23
Oh right yes, I see. The MenuComponent is in declarations and export. I was talking about the Angular Material modules — Fabio ha
– Fabio ha, Commented Nov 14, 2018 at 21:27

User3250 · Accepted Answer · 2018-11-15 02:11:39Z

1

You need to include all material modules in imports as well:

Shared Module

@NgModule({
  imports: [CommonModule,
    MatButtonModule,
    MatSelectModule,
    MatInputModule,
    MatOptionModule,
    MatToolbarModule
],
  declarations: [MenuComponent],
  exports: [
    MatButtonModule,
    MatSelectModule,
    MatInputModule,
    MatOptionModule,
    MatToolbarModule,
    MenuComponent
  ]
})

answered Nov 15, 2018 at 2:11

User3250

3,4536 gold badges34 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Shared component not working when imported into lazy loading module

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related