Components: webpack2: Cannot read property 'forRoot' of undefined

[robisim74]

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

[faisalmuhammad]

@robisim74 What is your vendor path for Material in webpack.vendor.config? I was having the same issue and it was fixed using the following path:

"@angular/material/bundles/material.umd.js"

You can try if that helps.

[robisim74]

Thanks @faisalmuhammad, but with webpack 2 I don't have a _vendor_ file, and simply I import from "@angular/material"

[tuurbo]

@robisim74 This works for me

// webpack config
module.exports = {
  resolve: {
    extensions: [".ts", ".js"],
    alias: {
        '@angular/material': '@angular/material/bundles/material.umd.js',
    },
  },
  ...
};

[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.

[theunreal]

I experienced this error too since beta-1.

had to downgrade to 2.0.0-alpha.11-2 and it worked again.

[devversion]

I just tried to confirm this issue with 2.0.0-beta.1 but everything worked with Webpack for me.

The module @angular/material should automatically point to the bundles/material.umd.js (ES5) and should work in Webpack

Can someone, who experiences the same problem, ensure that 2.0.0-beta.1 is really installed and also share his Webpack configuration? (with a gist or hastebin)

[robisim74]

@DevVersion Just to be precise: I am sure that the version 2.0.0-beta.1 is installed (the following is its _package.json_):

{
  "_args": [
    [
      {
        "raw": "@angular/[email protected]",
        "scope": "@angular",
        "escapedName": "@angular%2fmaterial",
        "name": "@angular/material",
        "rawSpec": "2.0.0-beta.1",
        "spec": "2.0.0-beta.1",
        "type": "version"
      },
      "C:\\Users\\Roberto\\Documents\\GitHub\\angular2localization"
    ]
  ],
  "_from": "@angular/[email protected]",
  "_id": "@angular/[email protected]",
  "_inCache": true,
  "_location": "/@angular/material",
  "_nodeVersion": "6.3.1",
  "_npmOperationalInternal": {
    "host": "packages-18-east.internal.npmjs.com",
    "tmp": "tmp/material-2.0.0-beta.1.tgz_1482521810432_0.7573386877775192"
  },
...

I am using Material 2 from version alpha.3 for this sample app, without this kind of problem: https://github.com/robisim74/angular2localization/tree/gh-pages

This is the webpack config: https://github.com/robisim74/angular2localization/blob/gh-pages/webpack.config.js

Try it: it works fine with Material 2.0.0-alpha.11-3, then if you update to beta.1 you will get the error.

[robisim74]

@DevVersion I may have found the problem: in _index.js_ of the distribuited package of Material, there are exports with *:

export * from './core';
export * from './module';
...

But Tree shaking with webpack seems not work (but should it work anyway? https://github.com/webpack/webpack/issues/2847) if you don't have a re-export like this:

export {MaterialModule} from './module';

I tried to change it in the distribuited package, and then it works.

For example, "@angular/http" has all the re-exports in its _index.js_ of the distribuited package:

export { BrowserXhr, JSONPBackend, JSONPConnection, CookieXSRFStrategy, XHRBackend, XHRConnection, BaseRequestOptions, RequestOptions, BaseResponseOptions, ResponseOptions, ReadyState, RequestMethod, ResponseContentType, ResponseType, Headers, Http, Jsonp, HttpModule, JsonpModule, Connection, ConnectionBackend, XSRFStrategy, Request, Response, QueryEncoder, URLSearchParams, VERSION } from './src/index';

[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.

[d3viant0ne]

FYI - Adding the resolve alias for the bundle problem breaks AoT builds. So while this ...

    alias: {
        '@angular/material': '@angular/material/bundles/material.umd.js',
    },

solves one problem, it creates another as you can't get that past ngc.

[d3viant0ne]

@sokra Landed a fix for this about 30 minutes ago so the question is, do we want to implement a work around for the current beta or just wait for the next rc tag for Webpack.

Correction, they cut the rc3 tag already. :)

[d3viant0ne]

For all concerned, the fix Sokra landed resolves the Webpack side of the issue. Currently running beta.1 successfully using 2.2.0-rc.3

[devversion]

Cool. Thanks to @sokra for fixing the issue so quick!

I've created a PR on Material which should help avoiding issues with treeshaking in Webpack 2 (See https://github.com/webpack/webpack/issues/3584#issuecomment-269468007).

Keeping this issue open so the PR can reference it properly.

[robisim74]

@DevVersion Thanks!

[WaseemAhmadNaeem]

Seems everyone resolved this issue, Newbie failed to get where are file which you guys are modifying.?

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}