Angular Material: "export 'MaterialComponents' was not found in './material/material.module'

Question

I'm new on Angular and I have some problems to export a material module. This is the error:

(Failed to compile.) ./src/app/app.module.ts 17:12-30 "export 'MaterialComponents' was not found in './material/material.module'

This is the Material Module:

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

const MaterialComponents = [
  MatButtonModule
];

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

App Module:

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

Correct it to MaterialModule

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

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

Also, note that you dont need to import and export same thing if you want to create a common shared module which will consolidate all other modules just do:

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

Although , the error is coming because you have not put export keyword in front of

export const MaterialComponents = [
  MatButtonModule
];

---

Even if you put export, you'll end up getting error so simply use what I suggested above. with your values you are passing as array in array

In your case, Below

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

is equivalent to:

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

which is nested array, and a wrong syntax for 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 { }

This equates to an array of arrays:

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

Shouldn't it be like this?

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