components: 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
About this issue
- Original URL
- State: closed
- Created 8 years ago
- Reactions: 4
- Comments: 16 (6 by maintainers)
Commits related to this issue
- chore(gestures): fix treeshaking for core * Treeshaking may break in Webpack and other bundlers for the `core` exports because our compiled JavaScript files are trying to export everything (`export *... — committed to devversion/material2 by devversion 8 years ago
- chore(gestures): fix treeshaking for core (#2447) Closes #2401 — committed to angular/components by devversion 7 years ago
@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.
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 followingexports
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 haveone
export.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.
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).
FYI - Adding the resolve alias for the bundle problem breaks AoT builds. So while this …
solves one problem, it creates another as you can’t get that past ngc.