Angular Material & npm run roll:prerender

[sebastianmacias]

When trying to prerender a route that uses angular material components I'm getting lots of errors like this:

...... [ERROR ->]<md-grid-tile>4</md-grid-tile>\n</md-grid-list>\n\n"): AppComponent@45:2\n\'md-grid-list\' is not a known element:\n1. If \'md-grid-list\' is an Angular component, then verify that it is part of this module.\n2. If \'md-grid-list\' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the \'@NgModule.schemas\' of this component to suppress this message. ("\n</md-grid-list>\n\n[ERROR ->]<md-grid-list cols="2">\n <md-grid-tile>1</md-grid-tile>\n <md-grid-tile>2</md-grid-tile>\n"): AppComponent@41:0\n\'md-card-title\' is not a known element:\n1. If \'md-card-title\' is an Angular component, then verify that it is part of this module.\n2. If \'md-card-title\' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the \'@NgModule.schemas\' of this component to suppress this message. ("\n <md-card-header>\n <div md-card-avatar class="example-header-image"></div>\n [ERROR ->]<md-card-title>Shiba Inu</md-card-title>\n <md-card-subtitle>Dog Breed</md-card-subtitle>\n </md-ca"): AppComponent@51:4\n\'md-card-subtitle\' is not a known element:\n1. If \'md-card-subtitle\' is an Angular component, then verify that it is part of this module.\n2. If \'md-card-subtitle\' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the \'@NgModule.schemas\' of this component to suppress this message. ("md-card-avatar class="example-header-image"></div>\n <md-card-title>Shiba Inu</md-card-title>\n [ERROR ->]<md-card-subtitle>Dog Breed</md-card-subtitle>\n </md-card-header>\n <img md-card-image src="assets/i"): AppComponent@52:4\n\'md-card-header\' is not a known element:\n1. If \'md-card-header\' is an Angular component, then verify that it is part of this module.\n2. If \'md-card-header\' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the \'@NgModule.schemas\' of this component to suppress this message. ("\n\n<md-card class="example-card">\n [ERROR ->]<md-card-header>\n <div md-card-avatar class="example-header-image"></div>\n <md-card-title>Shiba"): AppComponent@49:2\n\'md-card-content\' is not a known element:\n1. If \'md-card-content\' is an Angular component, then verify that it is part of this module.\n2. If \'md-card-content\' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the \'@NgModule.schemas\' of this component to suppress this message. ("\n </md-card-header>\n <img md-card-image src="assets/img/examples/shiba2.jpg">\n [ERROR ->]<md-card-content>\n <p>\n The Shiba Inu is the smallest of the six original and distinct spitz "): AppComponent@55:2\n\'md-card-actions\' is not a known element:\n1. If \'md-card-actions\' is an Angular component, then verify that it is part of this module.\n2. If \'md-card-actions\' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the \'@NgModule.schemas\' of this component to suppress this message. ("\n </p>\n </md-card-content>\n [ERROR ->]<md-card-actions>\n <button md-button>LIKE</button>\n <button md-button>SHARE</button>\n"): AppComponent@62:2\n\'md-card\' is not a known element:\n1. If \'md-card\' is an Angular component, then verify that it is part of this module.\n2. If \'md-card\' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the \'@NgModule.schemas\' of this component to suppress this message. ("\n</md-grid-list>\n\n[ERROR ->]<md-card class="example-card">\n <md-card-header>\n <div md-card-avatar class="example-header-image"): AppComponent@48:0' } }

Any help will be appreciated

[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

angular-rollup-starter@0.2.1 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.