Angular Материал: "экспорт" MaterialComponents "не найден в" ./material/material.module "

Question

Я новичок в Angular, и у меня есть некоторые проблемы с экспортом модуля материала. Это ошибка:

(Не удалось скомпилировать.) ./Src/app/app.module.ts 17: 12-30 "Экспорт" MaterialComponents "не найден в" ./material/ material.module '

Это модуль материалов:

import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';

const MaterialComponents = [
  MatButtonModule
];

@NgModule({
  exports: [MaterialComponents],
  imports: [MaterialComponents],
})
export class MaterialModule { }

Модуль приложения:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MaterialComponents } from './material/material.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MaterialComponents
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

Исправьте его на MaterialModule

import { MaterialModule } from './material/material.module';

  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MaterialModule //< -- HERE
  ],

Также обратите внимание, что вам не нужно import и export то же самое, если вы хотите создать общий общий модуль, который объединит все остальные modules просто сделайте:

@NgModule({
  exports: [MatButtonModule, OtherMatModules...],
  imports: [],
})
export class MaterialModule { }

Хотя , ошибка появляется, потому что вы не поставили ключевое слово export перед

export const MaterialComponents = [
  MatButtonModule
];

---

Даже если вы поставите экспорт, вы в конечном итоге получите ошибку, поэтому просто используйте то, что я предложил выше. с вашими значениями вы передаете как array в array

В вашем случае ниже

@NgModule({
  exports: [MaterialComponents],
  imports: [MaterialComponents],
})

эквивалентно:

@NgModule({
  exports: [[MatButtonModule]],
  imports: [[MatButtonModule]],
})

, который является вложенным массив и неправильный синтаксис для angular

Answer 2

import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';

const MaterialComponents = [
  MatButtonModule
];

@NgModule({
  exports: [MaterialComponents],
  imports: [MaterialComponents],
})
export class MaterialModule { }

Это соответствует массиву массивов:

@NgModule({
  exports: [[MatButtonModule ]],
  imports: [[MatButtonModule ]],
})
export class MaterialModule { }

Разве это не должно быть так?

@NgModule({
  exports: MaterialComponents,
  imports: MaterialComponents,
})
export class MaterialModule { }