Angular Material & npm run roll:prerender about angular-rollup-starter

[jkuri]

hi @sebastianmacias. check out src/app/app.module.universal.ts file, should look similar to yours src/app/app.module.ts but with UniversalModule on top.

[sebastianmacias]

Thanks for the tip @jkuri, that took care of the issue. However I'm now getting:

`--------------------------------------------
✔ SASS Build Time: 131ms
✔ AoT Build Time: 17.12s
✔ Build time: 6.85s
✔ Optimizing time: 14.10s

app.js (838.679 KB) -> app.js.gz (164.706 KB)

Build: 39108.421ms

[email protected] prerender /home/dev/Tests/angular-rollup-starter
node ./scripts/index.js --prerender

---

EXCEPTION: element.addEventListener is not a function
ORIGINAL STACKTRACE:
TypeError: element.addEventListener is not a function
at /home/dev/Tests/angular-rollup-starter/node_modules/@angular/material/bundles/material.umd.js:450:78
at Map.forEach (native)
....
`

This is how my app.module.universal.ts looks like (UniversalModule on top)

`import { UniversalModule } from 'angular2-universal';
import { MaterialModule } from '@angular/material';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
declarations: [
AppComponent
],
imports: [
UniversalModule,
FormsModule,
MaterialModule.forRoot()
],
entryComponents: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
`

[jkuri]

thats because universal works in node and not in browser, which means addEventListener is not recognized. in most cases jsdom takes care of that, for example if you do window.addEventListener it should work, but looks like not on an element.
if you place that listener somewhere in your code, try putting this in front;

if (typeof window === 'undefined') { 
  return;
}

I am using this workaround when getting similar errors and it works.
hovever, if this listener comes from material I believe only way is to open an issue there about universal or to create your own build with workaround above.

[sebastianmacias]

perfect! tnx again

[jkuri]

no problem, were you able to solve it?

[sebastianmacias]

Unfortunately I ran into additional compatibility issues of Angular Material with Angular Universal. Everything should work once this issue is closed.

[jkuri]

cool 👍 actually with a release of Angular 4 Universal will be built-in (Match 1st) and I will drop support on this starter since universal better works with webpack. I personally liked the speed of rebuilds with rollup but webpack improved that alot. there's no big difference in rebuilds lately.

actually universal is built-in Angular 4 since beta 8, if you are interested in demo please check https://github.com/robwormald/ng-universal-demo.
Closing this now.