Код VS/Angular — Линтер не распознает компоненты, импортированные через общий модуль

Итак, у меня есть общий модуль в моем проекте, куда я импортирую, среди прочего, все мои модули материалов Angular. Мой код строится и работает нормально. Проблема в том, что в моих html-файлах в vs-коде у меня есть красные волнистые линии под каждым тегом компонента угловых материалов с ошибкой:

'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. Сообщение исчезает, если я импортирую модули материалов непосредственно в свой модуль, а не через общий модуль. Во всяком случае, вот мой код:

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

Спасибо, что посмотрели.


visual-studio-code angular angular-module
person jmiles540    schedule 17.01.2020    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Почему вы экспортируете другие модули в разделе экспорта? Экспорт позволяет другим модулям получать доступ к компонентам/каналам, которые объявили ваш модуль. Не модули.

Итак, в product.module.ts импортируйте MatFormFieldModule

person Sachila Ranawaka    schedule 17.01.2020
comment
Я экспортирую модули из своего общего модуля, чтобы все другие мои модули могли импортировать один модуль и получать все общие импорты. Таким образом, мне не нужно импортировать MatFormFieldModule несколько раз в разные модули. angular.io/guide/sharing-ngmodules - person jmiles540; 17.01.2020

arrow_upward
1
arrow_downward

Я понял. У меня также установлен собственный скрипт, и я использовал путь @src для импорта общего модуля, как он предлагает:

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

Как только я вернул это, чтобы использовать относительный путь:

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

все стало нормально работать.

person jmiles540    schedule 17.01.2020