components: Build Error: `@angular/material/material"' has no exported member`

Bug, feature request, or proposal:

Build is crashing

What is the expected behavior?

Webpack is able to correctly import Material2 modules

What is the current behavior?

Webpack is not finding the export definitions

What are the steps to reproduce?

Not sure how to show it, but this occurred after doing a yarn/npm update.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

$ ng version @angular/cli: 1.4.5 node: 7.2.1 os: win32 x64 @angular/animations: 4.4.4 @angular/cdk: 2.0.0-beta.12 @angular/common: 4.4.4 @angular/compiler: 4.4.4 @angular/core: 4.4.4 @angular/flex-layout: 2.0.0-beta.9-c3c7151 @angular/forms: 4.4.4 @angular/http: 4.4.4 @angular/material: 2.0.0-beta.12-7fe1b81 @angular/platform-browser: 4.4.4 @angular/platform-browser-dynamic: 4.4.4 @angular/router: 4.4.4 @angular/cli: 1.4.5 @angular/compiler-cli: 4.4.4 @angular/language-service: 4.4.4 typescript: 2.5.3

Is there anything else we should know?

It’s the same symptoms #4521 shows. However the resolution there seemed to be updating to the latest build, which I’ve done and may have caused this issue to begin with.

Here is the stacktrace output:

Date: 2017-10-10T18:06:23.412Z
Hash: 23a3fb495d1cd162281d
Time: 5726ms
chunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 5.83 kB [entry] [rendered]
chunk {main} main.bundle.js, main.bundle.js.map (main) 1.06 kB {vendor} [initial] [rendered]
chunk {polyfills} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 323 bytes {inline} [initial] [rendered]
chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 66.5 kB {inline} [initial] [rendered]
chunk {vendor} vendor.bundle.js, vendor.bundle.js.map (vendor) 338 kB [initial] [rendered]

ERROR in <APP_PATH> (13,44): Module '"<APP_PATH>/node_modules/@angular/material/material"' has no exported member 'MdNativeDateModule'.
ERROR in <APP_PATH>/src/app/components/<MY_COMPONENT> (8,10): Module '"<APP_PATH>/node_modules/@angular/material/material"' has no exported member 'MdSliderChange'.
ERROR in <APP_PATH>/src/app/components/<MY_COMPONENT> (8,10): Module '"<APP_PATH>/node_modules/@angular/material/material"' has no exported member 'MD_DIALOG_DATA'.
ERROR in <APP_PATH>/src/app/components/<MY_COMPONENT> (8,26): Module '"<APP_PATH>/node_modules/@angular/material/material"' has no exported member 'MdDialogRef'.
ERROR in <APP_PATH> (11,3): Module '"<APP_PATH>/node_modules/@angular/material/material"' has no exported member 'MdButtonModule'.
ERROR in <APP_PATH> (11,19): Module '"<APP_PATH>/node_modules/@angular/material/material"' has no exported member 'MdCheckboxModule'.
ERROR in <APP_PATH> (11,37): Module '"<APP_PATH>/node_modules/@angular/material/material"' has no exported member 'MdToolbarModule'.
ERROR in <APP_PATH> (11,54): Module '"<APP_PATH>/node_modules/@angular/material/material"' has no exported member 'MdIconModule'.
ERROR in <APP_PATH> (11,68): Module '"<APP_PATH>/node_modules/@angular/material/material"' has no exported member 'MdCardModule'.
ERROR in <APP_PATH> (11,82): Module '"<APP_PATH>/node_modules/@angular/material/material"' has no exported member 'MdMenuModule'.
ERROR in <APP_PATH> (11,96): Module '"<APP_PATH>/node_modules/@angular/material/material"' has no exported member 'MdInputModule'.
ERROR in <APP_PATH> (12,3): Module '"<APP_PATH>/node_modules/@angular/material/material"' has no exported member 'MdSidenavModule'.
ERROR in <APP_PATH> (12,20): Module '"<APP_PATH>/node_modules/@angular/material/material"' has no exported member 'MdRippleModule'.
ERROR in <APP_PATH> (12,36): Module '"<APP_PATH>/node_modules/@angular/material/material"' has no exported member 'MdRadioModule'.
ERROR in <APP_PATH> (12,51): Module '"<APP_PATH>/node_modules/@angular/material/material"' has no exported member 'MdSliderModule'.
ERROR in <APP_PATH> (12,67): Module '"<APP_PATH>/node_modules/@angular/material/material"' has no exported member 'MdFormFieldModule'.
ERROR in <APP_PATH> (12,86): Module '"<APP_PATH>/node_modules/@angular/material/material"' has no exported member 'MdSelectModule'.
ERROR in <APP_PATH> (13,3): Module '"<APP_PATH>/node_modules/@angular/material/material"' has no exported member 'MdSlideToggleModule'.
ERROR in <APP_PATH> (13,24): Module '"<APP_PATH>/node_modules/@angular/material/material"' has no exported member 'MdDatepickerModule'.
ERROR in <APP_PATH>/src/app/components/<MY_COMPONENT> (8,26): Module '"<APP_PATH>/node_modules/@angular/material/material"' has no exported member 'MdDialog'.
ERROR in <APP_PATH> (13,64): Module '"<APP_PATH>/node_modules/@angular/material/material"' has no exported member 'MdAutocompleteModule'.
ERROR in <APP_PATH> (13,86): Module '"<APP_PATH>/node_modules/@angular/material/material"' has no exported member 'MdDialogModule'.
ERROR in <APP_PATH> (14,3): Module '"<APP_PATH>/node_modules/@angular/material/material"' has no exported member 'MdProgressBarModule'.
ERROR in <APP_PATH>/src/app/components/<MY_COMPONENT> (5,10): Module '"<APP_PATH>/node_modules/@angular/material/material"' has no exported member 'MdSlideToggleChange'.
ERROR in <APP_PATH>/src/app/components/components-test.module.ts (2,3): Module '"<APP_PATH>/node_modules/@angular/material/material"' has no exported member 'MdButtonModule'.
ERROR in <APP_PATH>/src/app/components/components-test.module.ts (2,19): Module '"<APP_PATH>/node_modules/@angular/material/material"' has no exported member 'MdCheckboxModule'.
ERROR in <APP_PATH>/src/app/components/components-test.module.ts (2,37): Module '"<APP_PATH>/node_modules/@angular/material/material"' has no exported member 'MdToolbarModule'.
ERROR in <APP_PATH>/src/app/components/components-test.module.ts (2,54): Module '"<APP_PATH>/node_modules/@angular/material/material"' has no exported member 'MdIconModule'.
ERROR in <APP_PATH>/src/app/components/components-test.module.ts (2,68): Module '"<APP_PATH>/node_modules/@angular/material/material"' has no exported member 'MdCardModule'.
ERROR in <APP_PATH>/src/app/components/components-test.module.ts (2,82): Module '"<APP_PATH>/node_modules/@angular/material/material"' has no exported member 'MdMenuModule'.
ERROR in <APP_PATH>/src/app/components/components-test.module.ts (2,96): Module '"<APP_PATH>/node_modules/@angular/material/material"' has no exported member 'MdInputModule'.
ERROR in <APP_PATH>/src/app/components/components-test.module.ts (3,3): Module '"<APP_PATH>/node_modules/@angular/material/material"' has no exported member 'MdSidenavModule'.
ERROR in <APP_PATH>/src/app/components/components-test.module.ts (3,20): Module '"<APP_PATH>/node_modules/@angular/material/material"' has no exported member 'MdRippleModule'.
ERROR in <APP_PATH>/src/app/components/components-test.module.ts (3,36): Module '"<APP_PATH>/node_modules/@angular/material/material"' has no exported member 'MdRadioModule'.
ERROR in <APP_PATH>/src/app/components/components-test.module.ts (3,51): Module '"<APP_PATH>/node_modules/@angular/material/material"' has no exported member 'MdSliderModule'.
ERROR in <APP_PATH>/src/app/components/components-test.module.ts (3,67): Module '"<APP_PATH>/node_modules/@angular/material/material"' has no exported member 'MdSelectModule'.
ERROR in <APP_PATH>/src/app/components/components-test.module.ts (3,83): Module '"<APP_PATH>/node_modules/@angular/material/material"' has no exported member 'MdSlideToggleModule'.
ERROR in <APP_PATH>/src/app/components/components-test.module.ts (3,104): Module '"<APP_PATH>/node_modules/@angular/material/material"' has no exported member 'MdFormFieldModule'.
ERROR in Error: MdButtonModule is not an NgModule
    at _getNgModuleMetadata (<APP_PATH>\node_modules\@angular\compiler-cli\src\ngtools_impl.js:140:15)
    at _extractLazyRoutesFromStaticModule (<APP_PATH>\node_modules\@angular\compiler-cli\src\ngtools_impl.js:109:26)
    at <APP_PATH>\node_modules\@angular\compiler-cli\src\ngtools_impl.js:129:27
    at Array.reduce (native)
    at _extractLazyRoutesFromStaticModule (<APP_PATH>\node_modules\@angular\compiler-cli\src\ngtools_impl.js:128:10)
    at <APP_PATH>\node_modules\@angular\compiler-cli\src\ngtools_impl.js:129:27
    at Array.reduce (native)
    at _extractLazyRoutesFromStaticModule (<APP_PATH>\node_modules\@angular\compiler-cli\src\ngtools_impl.js:128:10)
    at <APP_PATH>\node_modules\@angular\compiler-cli\src\ngtools_impl.js:129:27
    at Array.reduce (native)
    at _extractLazyRoutesFromStaticModule (<APP_PATH>\node_modules\@angular\compiler-cli\src\ngtools_impl.js:128:10)
    at Object.listLazyRoutesOfModule (<APP_PATH>\node_modules\@angular\compiler-cli\src\ngtools_impl.js:53:22)
    at Function.NgTools_InternalApi_NG_2.listLazyRoutes (<APP_PATH>\node_modules\@angular\compiler-cli\src\ngtools_api.js:91:39)
    at AotPlugin._getLazyRoutesFromNgtools (<APP_PATH>\node_modules\@ngtools\webpack\src\plugin.js:207:44)
    at _donePromise.Promise.resolve.then.then.then.then.then (<APP_PATH>\node_modules\@ngtools\webpack\src\plugin.js:443:24)
    at process._tickCallback (internal/process/next_tick.js:103:7)

webpack: Failed to compile.

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 17 (3 by maintainers)

Most upvoted comments

@devsull replace Md* with Mat* (see deprecation here)

+100

willshowell on Oct 10, 2017

Did you both make the change from Md to Mat? If so, I’ve occasionally seen this before and it was always solved by blowing away node_modules and reinstalling.

+43

willshowell on Oct 10, 2017

@denver-HJS @atlabiz In “@angular/material”: “^2.0.0-beta.12” Every Md tag has been replaced by Mat so to use it need to change tags import { MatAutocompleteModule, MatButtonModule, MatButtonToggleModule, MatCardModule, MatCheckboxModule, MatChipsModule, MatDatepickerModule, MatDialogModule, MatExpansionModule, MatGridListModule, MatIconModule, MatInputModule, MatListModule, MatMenuModule, MatNativeDateModule, MatPaginatorModule, MatProgressBarModule, MatProgressSpinnerModule, MatRadioModule, MatRippleModule, MatSelectModule, MatSidenavModule, MatSliderModule, MatSlideToggleModule, MatSnackBarModule, MatSortModule, MatTableModule, MatTabsModule, MatToolbarModule, MatTooltipModule } from '@angular/material';

@NgModule({ imports: [ MatAutocompleteModule, MatButtonModule, MatButtonToggleModule, MatCardModule, MatCheckboxModule, MatChipsModule, MatDatepickerModule, MatDialogModule, MatExpansionModule, MatGridListModule, MatIconModule, MatInputModule, MatListModule, MatMenuModule, MatNativeDateModule, MatPaginatorModule, MatProgressBarModule, MatProgressSpinnerModule, MatRadioModule, MatRippleModule, MatSelectModule, MatSidenavModule, MatSliderModule, MatSlideToggleModule, MatSnackBarModule, MatSortModule, MatTableModule, MatTabsModule, MatToolbarModule, MatTooltipModule, ] })

+11

nasiruddin-saiyed on Oct 18, 2017

@atlabiz https://www.npmjs.com/package/angular-material-prefix-updater

benb7760 on Oct 16, 2017

I’m only using MdModules AFAIK… Here’s the import statement for the MdModules that are in my app.module.ts: import { MdProgressBarModule, MdTableModule, MdPaginatorModule, MdSortModule } from "@angular/material"; I’ve tried deleting my node_modules folder and installing again, but I’ll get this error when trying to build with the angular cli.

devsull on Oct 10, 2017

@willshowell It seems to work for the Md*, but what should we replace MaterialModule with ? I have some MaterialModule.forRoot() here and there.

d-damien on Oct 24, 2017

@willshowell Thank you for the help, that fixed it!

devsull on Oct 10, 2017