VS code/Angular - Linter doesn't recognize components imported through shared module

Question

So I have a shared module in my project where I'm importing, among other things, all of my Angular materials modules. My code builds and runs just fine. The issue is that in my html files, in vs code, I have the red squiggly lines under every angular materials component tag, with the error:

'mat-select' is not a known element:
1. If 'mat-select' is an Angular component, then verify that it is part of this module.
2. If 'mat-select' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.ng(0)

I've tried restarting the IDE. The message does go away if I import the material modules directly into my module, rather than through the shared module. Anyhow, here's my code:

shared.module.ts

...

@NgModule({
  imports: [
    CommonModule,
    ReactiveFormsModule,
    MatFormFieldModule,
    MatIconModule,
    MatInputModule,
    FlexLayoutModule,
    MatListModule,
    MatSelectModule,
    MatSidenavModule,
    MatToolbarModule
  ],
  exports:
  [
    ReactiveFormsModule,
    MatFormFieldModule,
    MatIconModule,
    MatInputModule,
    FlexLayoutModule,
    MatListModule,
    MatSelectModule,
    MatSidenavModule,
    MatToolbarModule
  ]
})
export class SharedModule { }

product.module.ts

...
@NgModule({
  declarations: [
    ProductComponent,
    ProductFormComponent,
    AddProductToStoreFormComponent,
    StorePickerComponent,
    StorePickerRootComponent,
    SizeFormComponent,
    CategoryPickerRootComponent,
    CategoryPickerComponent

  ],
  imports: [
    CommonModule,
    ProductRoutingModule,
    SharedModule
  ]
})
export class ProductModule { }

Thanks for looking.

Answer 1

Why are you exporting other modules in the export section? Export allows other modules to access components/pipes that declared your module. Not modules.

So in product.module.ts, import the MatFormFieldModule