Ошибка при попытке использовать общий модуль в Angular 9 заставляет мои компоненты не распознавать мой модуль материала

Question

Я создал общий модуль для модульности моего приложения, поэтому в случае, если я хочу использовать, например, компонент Материал, я могу иметь его в другом модуле, импортируя его, проблема заключается в том, что когда я это делаю, выдает такую ​​ошибку If 'mat-menu' is an Angular component, then verify that it is part of this module. Как я могу решить это? В прошлом без общего модуля он работал отлично, а теперь нет, и его нужно было использовать с общим модулем, потому что его для домашней работы

• Ниже я позволю своим трем Модули

Модуль приложения

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
//My imports
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { UsersDashboardComponent } from './components/users-dashboard/users-dashboard.component';
import { AdminDashboardComponent } from './components/admin-dashboard/admin-dashboard.component';
import { RouterModule } from '@angular/router';
import { HttpClientModule} from '@angular/common/http';
import { HomeAdminComponent } from './auth/home-admin/home-admin.component';
import { HomeComponent } from './auth/home/home.component';
import { CoreModule } from './../app/core/core.module';
@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    AdminDashboardComponent,
    UsersDashboardComponent,
    HomeAdminComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgbModule,
    BrowserAnimationsModule,
    RouterModule,
    HttpClientModule,
    CoreModule,  
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Модуль аутентификации

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SharedModule } from '../shared/shared.module';
import { AuthRoutingModule } from './auth-routing.module';
import { HomeComponent } from 'src/app/auth/home/home.component';
import { HomeAdminComponent } from 'src/app/auth/home-admin/home-admin.component';

@NgModule({
  declarations: [HomeComponent,HomeAdminComponent],
  imports: [
    CommonModule,
    AuthRoutingModule,
    SharedModule,
  ],
})
export class AuthModule { }

Общий модуль

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MaterialModule } from 'src/app/shared/material/material.module';
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    MaterialModule,
    ReactiveFormsModule
  ],
  exports: [
    MaterialModule,
    ReactiveFormsModule
  ]
})
export class SharedModule { }

Answer 1

Я решаю это, помещая SharedModule в импорт AppModule

Answer 2

Я бы порекомендовал создать ваши собственные собственные Компоненты, собранные поверх любого используемого вами модуля (в вашем случае это angular материал) внутри общего модуля, а затем экспортировать эти компоненты и импортировать ваш общий модуль в любые другие модули. , используйте эти компоненты, это поможет вам в будущем, если вы решили использовать другую библиотеку вместо angular материала или если вы хотите создать какой-то нестандартный дизайн.

Answer 3

Чтобы избежать этой проблемы, вам нужно добавить SharedModule в качестве импорта во все FeatureModules, где ваши компоненты находятся в качестве объявлений. То же самое, что вы сделали в AuthModule. А также все модули материалов, импортированные в MaterialModule, должны быть экспортированы в экспорт.