unable to export MaterialModule from shared.module.ts on Build time

Question

It's working on ng serve but giving error as follow

ERROR in Unexpected value 'MaterialModule in E:/Code/employee-web/node_modules/@angular/material/typings/index.d.ts'

impor ted by the module 'SharedModule in E:/Code/employee-web/src/app/shared/shared.module.ts'. Please add a @NgModule annotatio n. ERROR in ./src/main.ts Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in 'E:\Code\employee-web\src' resolve './$$_gendir/app/app.module.ngfactory' in 'E:\Code\employee-web\src' using description file: E:\Code\employee-web\package.json (relative path: ./src) Field 'browser' doesn't contain a valid alias configuration after using description file: E:\Code\employee-web\package.json (relative path: ./src) using description file: E:\Code\employee-web\package.json (relative path: ./src/$$_gendir/app/app.module.ngfactory) no extension Field 'browser' doesn't contain a valid alias configuration E:\Code\employee-web\src\$$_gendir\app\app.module.ngfactory doesn't exist .ts Field 'browser' doesn't contain a valid alias configuration E:\Code\employee-web\src\$$_gendir\app\app.module.ngfactory.ts doesn't exist .js Field 'browser' doesn't contain a valid alias configuration E:\Code\employee-web\src\$$_gendir\app\app.module.ngfactory.js doesn't exist as directory E:\Code\employee-web\src\$$_gendir\app\app.module.ngfactory doesn't exist [E:\Code\employee-web\src\$$_gendir\app\app.module.ngfactory] [E:\Code\employee-web\src\$$_gendir\app\app.module.ngfactory.ts] [E:\Code\employee-web\src\$$_gendir\app\app.module.ngfactory.js] [E:\Code\employee-web\src\$$_gendir\app\app.module.ngfactory] @ ./src/main.ts 3:0-74 @ multi ./src/main.ts

Can anyone look into this?

here is sharedModule

> @NgModule({
> 
>   declarations: [],   providers: [
>        ],   imports: [
>     HttpModule,
>     MaterialModule,
>        ],   exports: [
>     CommonModule,
>         //matrial MOdule
>     // MdTooltipModule,
>     // MdTabsModule,
>     // MdSlideToggleModule,
>     // MdIconModule,
>     // MdDialogModule,
>     // MdButtonModule,
>     // MdListModule,
>     // MdCardModule,
>     // MdToolbarModule,
>     // MdProgressSpinnerModule,
>     // MdProgressBarModule,
>     MaterialModule,
> 
> 
>       ] }) export class SharedModule { }

Answer 1

You've likely done the following:

import {MaterialModule} from "@angular/material";

@NgModule({
   declarations: [],
   providers: [],
   imports: [
     HttpModule,
     MaterialModule,
   ],
   exports: [
     CommonModule,
     MaterialModule,
   ]
})
export class SharedModule {}

However, the MaterialModule has been deprecated for a while now (I don't remember what version exactly). It is now recommended you import the component modules individually: https://material.angular.io/guide/getting-started#step-3-import-the-component-modules

So change to something like the following:

// Import whatever components you intend to use in this shared module here
import {MdButtonModule, MdCheckboxModule} from '@angular/material';

@NgModule({
   ...
   imports: [MdButtonModule, MdCheckboxModule],
   exports: [MdButtonModule, MdCheckboxModule],
   ...
})
export class SharedModule {}

You can emulate the MaterialModule functionality (the kitchen sink) by importing every single component module available, and then exporting them from your shared module.

Answer 2

I had the same error using MdDialog from MaterialModule. I just fixed it right now and it works.

I fixed it by specifying the particular material module I'm making use of in my app.

in my app.module.ts:

import { MdDialogModule } from '@angular/material';
imports: [
  MdDialogModule
]

in my component:

import { MdDialog } from '@angular/material'
import { AuthorizationComponent } from '../authorization/authorization.component'

export class HomeComponent implements OnInit { 
  constructor(private dialog: MdDialog){}

  ngOnInit() {
  this.dialog.afterAllClosed
    .subscribe( () => {
          //make changes 
      })
   }

    sign_up() {
      this.dialog.open(AuthorizationComponent)  //open component
    }

}