angular - VS code/Angular - Linter 无法识别通过共享模块导入的组件

Question

所以我在我的项目中有一个共享模块，我在其中导入了我所有的 Angular Material 模块。我的代码构建并运行得很好。问题是，在我的 html 文件中，在 vs 代码中，每个 Angular Material 组件标签下都有红色波浪线，错误是:

'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)

我已尝试重新启动 IDE。如果我将 Material 模块直接导入到我的模块中，而不是通过共享模块，则消息确实会消失。无论如何，这是我的代码:

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 { }

感谢您的关注。

Answer 1

为什么要在导出部分导出其他模块？导出允许其他模块访问声明您的模块的组件/管道。不是模块。

所以在 product.module.ts 中，导入 MatFormFieldModule