CODEWITHSUNDEEP
angularvisual-studio-codeangular-module
jmiles540
jmiles540

Reputation: 63

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

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.

Upvotes: 3

Views: 2775

Answers (2)

jmiles540
jmiles540

Reputation: 63

I figured it out. I also have nativescript installed and was using the @src path to import shared module as it suggests:

import { SharedModule } from '@src/app/shared/shared.module';

Once I reverthed that to use a relative path:

import { SharedModule } from '../../shared/shared.module';

everything started working fine.

Upvotes: 1

Sachila Ranawaka
Sachila Ranawaka

Reputation: 41397

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

Upvotes: 1

Related Questions