Angular共享Material模块无法在组件中使用的解决方法求助

我仔细看了你的代码，发现两个关键错误导致datafile-list组件无法识别Material组件，下面是具体的修复方案：

问题1：错误地将共享模块放入declarations数组 #

declarations数组的作用是声明当前模块所属的组件、指令、管道，绝对不能用来放置NgModule。你把EDXMaterialModule加到declarations里是完全错误的操作，会导致模块加载逻辑异常。

问题2：未在DatafileModule的imports中引入共享模块 #

要让模块内的组件能使用共享模块导出的Material组件，必须将EDXMaterialModule添加到DatafileModule的imports数组中，这样当前模块才能访问到共享模块对外暴露的Material组件。

修正后的datafile.module.ts代码 #

import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { DatafileDetailComponent } from './datafile-detail/datafile-detail.component';
import { DatafileListComponent } from './datafile-list/datafile-list.component';
import { DatafileLoader } from './datafile-loader.service';
import { EDXMaterialModule } from '../shared/edxMaterialModule';

const routes: Routes = [
  { path: '', component: DatafileListComponent },
  { path: ':id', component: DatafileDetailComponent }
];

@NgModule({
  declarations: [DatafileListComponent, DatafileDetailComponent], // 移除EDXMaterialModule
  imports: [
    CommonModule,
    HttpClientModule,
    RouterModule.forChild(routes),
    EDXMaterialModule // 在这里添加共享模块
  ],
  providers: [DatafileLoader]
})
export class DatafileModule { }

额外注意事项 #

• 你的共享模块文件名写的是edxMoaterailModule（注意拼写：Moaterail应为Material），请确保文件名和import语句中的路径完全一致，避免因路径错误导致模块无法加载。
• 你已经在共享模块中导入了hammerjs，这部分没问题，Angular Material的部分交互组件依赖它，保持即可。

内容的提问来源于stack exchange，提问作者Synphony32