尝试在Angular 9中使用共享模块时出错，导致我的组件无法识别我的材料模块

Question

我创建了一个共享模块来模块化我的应用程序，所以如果我想使用一个Material组件，我可以通过导入它将其放入其他模块，问题是当我这样做时，会出现这种错误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 { }

Auth模块

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

为了避免这个问题，您需要在组件作为声明驻留的所有FeatureModules中添加SharedModule作为导入。与您在AuthModule中所做的相同。此外，导入MaterialModule的所有材料模块都应在导出中导出。

Answer 2

我解决了将SharedModule放入AppModule的导入中的问题

Answer 3

我建议在共享模块内使用的任何模块(在您的情况下，它是有角度的材料(之上创建您自己的自定义组件，然后导出这些组件并在任何其他模块中导入您的共享模块，然后使用这些组件，如果你决定使用另一个库而不是有角度的材料，或者如果你想构建一些自定义设计，这将对你有所帮助。