webpack2: Cannot read property 'forRoot' of undefined

Bug, feature request, or proposal:

After building the app with webapck, I get the following error in browser console:

Uncaught TypeError: Cannot read property 'forRoot' of undefined
    at app.bundle.js:76094
    at Object.<anonymous> (app.bundle.js:76119)
    at __webpack_require__ (app.bundle.js:48)
    at Object.<anonymous> (app.bundle.js:115880)
    at __webpack_require__ (app.bundle.js:48)
    at app.bundle.js:138
    at app.bundle.js:141

And the following is the bundle (line 76094 is the last one):

var AppModule = (function () {
    function AppModule() {
    }
    AppModule = __decorate([
        __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__angular_core__["b" /* NgModule */])({
            imports: [
                __WEBPACK_IMPORTED_MODULE_1__angular_platform_browser__["a" /* BrowserModule */],
                __WEBPACK_IMPORTED_MODULE_3__app_routes__["a" /* routing */],
                __WEBPACK_IMPORTED_MODULE_7__shared_shared_module__["a" /* SharedModule */],
                __WEBPACK_IMPORTED_MODULE_8__angular_material__["MaterialModule"].forRoot(),
...

What are the steps to reproduce?

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

@NgModule({
    imports: [
        BrowserModule,
        ...
        MaterialModule.forRoot()
    ],
    declarations: [
        AppComponent,
        ...
    ],
    providers: [
    ],
    bootstrap: [AppComponent]
})

export class AppModule { }

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

Angular 2.4.0 Angular Material 2.0.0-beta.1 webpack 2.2.0-rc.1 Node v6.2.2 npm 4.0.2

Is there anything else we should know?

I removed the precedent version of Material before installing the new version. No problem up to version 2.0.0-alpha.11-3

[devversion]

@robisim74 Uff, it took me a while to figure out what causes the issues with Webpack 2.

The problem is that SHA https://github.com/angular/material2/commit/28691ca78042aed428781a3d88af7fc5cff0f8bb introduced a new file, which only includes TypeScript typings.

This means that the file is completely empty when compiled to JavaScript.

Now the Material 2 core package tries to re-export all export’s from this file… but there are no exports and Webpack 2 is now somehow failing to parse following exports from other files.

This means that the MaterialModule will be undefined and your Angular 2 application doesn’t work.

I just filed an issue on the Webpack repository. See https://github.com/webpack/webpack/issues/3584

@jelbourn As a temporary fix, I’d recommend moving the annotations to the gesture-config file, because those always have one export.

[robisim74]

Thanks @tuurbo, I will try it. But I think that the import from “@angular/material” should work without any workaround, as “@angular/core” and all the other packages.