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

【问题标题】：Error trying to use a shared module in Angular 9 make my components cant recognise my material module尝试在 Angular 9 中使用共享模块时出错，使我的组件无法识别我的材料模块
【发布时间】：2020-06-14 07:29:42
【问题描述】：

我创建了一个共享模块来模块化我的应用程序，因此如果我想使用例如 Material 组件，我可以通过导入它在其他模块中拥有它，问题是当我这样做时会出现这种错误 @987654321 @ 我该如何解决它？。过去没有共享模块它工作得很好，但现在没有，并且它需要与共享模块一起，因为它用于家庭作业

下面我将让我的三个模块

应用模块

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

【问题讨论】：

你在哪里使用 mat-menu 在侧 Auth Module 或 App Module 中？此外，您可以删除共享模块中的导出
内部Auth Module@prabhatojha

标签： javascript angular angular-material angular-directive

【解决方案1】：

为避免此问题，您需要将 SharedModule 添加为组件作为声明所在的所有 FeatureModules 的导入。就像您在AuthModule 中所做的一样。并且所有导入MaterialModule的材质模块都应该在exports中导出。

【讨论】：

除了哈里说的，还需要将SharedModule导入AppModule。

【解决方案2】：

我解决了将SharedModule 放入AppModule 的导入

【讨论】：

【解决方案3】：

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

【讨论】：