尝试在 Angular 中使用共享模块时出错 9 使我的组件无法识别我的 material 模块

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

授权模块

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 作为导入添加到您的组件作为声明所在的所有 FeatureModules 中。与您在 AuthModule 中所做的一样。并且所有导入 MaterialModule 的 material 模块都应该在导出中导出。

Answer 2

我解决了将 SharedModule 放入 AppModule

的导入

Answer 3

我建议在共享模块中使用您正在使用的任何模块（在您的情况下是 angular material）创建您自己的自定义组件，然后导出这些组件并在任何模块中导入您的共享模块然后使用其他模块，使用这些组件，如果您决定使用另一个库而不是 angular material 或者如果您想构建一些自定义设计，这将在将来帮助您。

尝试在 Angular 中使用共享模块时出错 9 使我的组件无法识别我的 material 模块

Error trying to use a shared module in Angular 9 make my components cant recognise my material module

javascript

angular-directive

angular-material

angular