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

Posted 2023-02-22

【中文标题】尝试在 Angular 9 中使用共享模块时出错，使我的组件无法识别我的材料模块

【英文标题】：Error trying to use a shared module in Angular 9 make my components cant recognise my material module

【发布时间】：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

【参考方案1】：

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

【讨论】：

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

【参考方案2】：

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

【参考方案3】：

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