Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

AOT with @angular/material #1301

Closed
shlomiassaf opened this issue Dec 27, 2016 · 5 comments
Closed

AOT with @angular/material #1301

shlomiassaf opened this issue Dec 27, 2016 · 5 comments

Comments

@shlomiassaf
Copy link
Contributor

shlomiassaf commented Dec 27, 2016

Trying to use the new AOT I get a weird behaviour with @angular/material

The error says:

main.bundle.js:1139 Uncaught TypeError: Cannot read property 'forRoot' of undefined

Basically the MaterialModule is undefined so calling MaterialModule.forRoot() causes the error.

My imports are as usual:

import { NgModule, ApplicationRef } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
import { HttpModule, Http } from '@angular/http';
import { RouterModule } from '@angular/router';
import { MaterialModule } from '@angular/material';

Looking at the generated code shows something interesting:

                __WEBPACK_IMPORTED_MODULE_1__angular_platform_browser__["c" /* BrowserModule */],
                __WEBPACK_IMPORTED_MODULE_2__angular_forms__["a" /* ReactiveFormsModule */],
                __WEBPACK_IMPORTED_MODULE_3__angular_http__["a" /* HttpModule */],
                __WEBPACK_IMPORTED_MODULE_4__angular_router__["a" /* RouterModule */].forRoot(__WEBPACK_IMPORTED_MODULE_17__app_root_routes__["a" /* ROUTES */], { useHash: true }),
                __WEBPACK_IMPORTED_MODULE_6__angular_material__["MaterialModule"].forRoot(),

Material is the only module that is left intact.

I'm not using AOT compilation, just running npm run start
Any ideas?

@shlomiassaf
Copy link
Contributor Author

Looks like the Material got some of the objects set, some undefined.

image

Has a strong tree shaking smell :)

Something cut the webpack process in the middle, maybe cyclic deps?

@shlomiassaf
Copy link
Contributor Author

Update:
Removing the CommonsChunkPlugin for vendor didn't help, still same result...

@shlomiassaf
Copy link
Contributor Author

Ok, getting closer...

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

Works...

the material exports?

@shlomiassaf
Copy link
Contributor Author

Ok, more clues...

This is the material index.js file:

export * from './core';
export * from './module';
export * from './button/index';
export * from './button-toggle/index';
// ... more

this is the @angular/core index file:

export { NgLocalization, CommonModule, NgClass, NgFor, NgIf, NgPlural, NgPluralCase, NgStyle, NgSwitch, NgSwitchCase, NgSwitchDefault, NgTemplateOutlet, AsyncPipe, DatePipe, I18nPluralPipe, I18nSelectPipe, JsonPipe, LowerCasePipe, CurrencyPipe, DecimalPipe, PercentPipe, SlicePipe, UpperCasePipe, VERSION, Version, PlatformLocation, LocationStrategy, APP_BASE_HREF, HashLocationStrategy, PathLocationStrategy, Location } from './src/common';

It looks like the setup can't handle wildcard exports

Changing the index.js file of @angular/material to:

export { MaterialModule, MaterialRootModule } from './module';

(using only the module....)

###Everything works! Property names minified as well.

Here's an interesting point:
Changing only the material module line to export specific:

export * from './core';
export { MaterialModule, MaterialRootModule } from './module';
export * from './button/index';
export * from './button-toggle/index';
/// ... more

Works (for MaterialModule only) but the property names are no minified!

@joshwiens
Copy link
Contributor

joshwiens commented Dec 27, 2016

This is a problem with the Material / Webpack, not the seed or configuration

angular/components#2401

Roll back to alpha.11-3

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants