Javascriptservices: Support for Angular Material

[rbasniak]

Hi, I was watching the talks at Angular Connect this week and was wondering if there is any chance of supporting Angular Material 2 on Angular template.

It seems to be a very good option and since it's from Angular team they will play along very nice in the long term.

I tried a few different ways but couldn't made it to work together with this setup...

[MarkPieszak]

Yes it should be working (for the most part), with the server prerendering from Universal. How are you trying to set it up?

[SteveSandersonMS]

As far as I'm aware this should already work fine, but if you find anything that makes you think it's not compatible, please let us know.

[rbasniak]

Hi, the steps I'm doing are the following:

1) yo aspnetcore-spa, then open project in VS and run to check that everything is ok
2)npm install --save @angular/material
3) Add '@angular/material' to webpack.config.vendor.js
4) Add import { MaterialModule } from '@angular/material';to app.module
5) Add MaterialModule.forRoot() to app.module (after UniveralModule)
6) Add <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> to _Layout.cshtml
7) run node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js --env.prod
8) change app.component.html to:

<div>
<md-toolbar color="primary">
<span>
<md-icon>pets</md-icon>
LeashedIn
</span>
<button md-icon-button>
<md-icon>more_vert</md-icon>
</button>
</md-toolbar>
<button md-raised-button color="accent">CLICK ME</button>

9) run the application

Then I get the following exception:

An unhandled exception occurred while processing the request.

Exception: Call to Node module failed with error: ReferenceError: document is not defined
at new RippleRenderer (C:\Users\rbasniak\Documents\Visual Studio 2015\Projects\YeomanTest\node_modules\@angular\material\material.umd.js:193:31)
at new MdRipple (C:\Users\rbasniak\Documents\Visual Studio 2015\Projects\YeomanTest\node_modules\@angular\material\material.umd.js:327:32)
at AppView._View_MdButton1.createInternal (MdButton.ngfactory.js:63:24)
at AppView.create (C:\Users\rbasniak\Documents\Visual Studio 2015\Projects\YeomanTest\node_modules\@angular\core\bundles\core.umd.js:9419:25)
at TemplateRef_.createEmbeddedView (C:\Users\rbasniak\Documents\Visual Studio 2015\Projects\YeomanTest\node_modules\@angular\core\bundles\core.umd.js:7510:18)
at ViewContainerRef_.createEmbeddedView (C:\Users\rbasniak\Documents\Visual Studio 2015\Projects\YeomanTest\node_modules\@angular\core\bundles\core.umd.js:5297:39)
at NgIf.Object.defineProperty.set as ngIf
at AppView._View_MdButton0.detectChangesInternal (MdButton.ngfactory.js:42:25)
at AppView.detectChanges (C:\Users\rbasniak\Documents\Visual Studio 2015\Projects\YeomanTest\node_modules\@angular\core\bundles\core.umd.js:9566:18)
at AppView.detectViewChildrenChanges (C:\Users\rbasniak\Documents\Visual Studio 2015\Projects\YeomanTest\node_modules\@angular\core\bundles\core.umd.js:9592:23)

[SteveSandersonMS]

The document is not defined message sounds like that particular part of Angular Material isn't compatible with angular-universal (server-side rendering). It sounds like it's assuming that it runs inside a browser and hence document would be defined.

@MarkPieszak, do you know if anyone has confirmed that Angular Material can be used with angular-universal?

[SteveSandersonMS]

Ah yes, it is a known issue with Angular Material and angular-universal: https://github.com/angular/material2/issues/774

You might want to try their suggested workaround, but even then further comments suggest there are issues with something called ripple (which I notice is also mentioned in your stack trace).

So if you don't find a way of making those two things play well together, you'll have to either disable server-side rendering for now, or avoid using the parts of Angular Material that blow up.

[MarkPieszak]

Apologies for the delay! Yes I think there were 1 or 2 components (that I'm aware of) that might not play well with Universal, but those teams know about it and are working on a fix as well. Looks like you found the issue already 😄

I'm sure soon it will be effortless to use the two together!

[Shawn-Fan]

expecting......

[MarkPieszak]

@Shawn-Fan You can track the issue here as well https://github.com/angular/universal-starter/issues/185, I'll bring it up at our next meeting to see what we can do about it to try and speed it up. Thanks for being patient!

[CalvinDale]

Since many Angular developers would like to use _Angular Material_ in their projects, it would be helpful if the _Angular_ template provided in Microsoft.AspNetCore.SpaTemplates was built using _Angular-Material_ rather than _Bootstrap_ at least once Angular-Material 1.0 is released (it's currently at Beta 2). Or alternatively perhaps another template based on _Angular-Material_ could be added to the SpaTemplates bundle. As the comments on this and several other issue threads indicate, it's rather tricky to get _Angular-Material_ and _Angular-Universal_ (server-side-rendering) configured properly.

Eliminating _Bootstrap_ would also eliminate the need for _jQuery_. Because of its large-_ish_ size, _jQuery_ tends to undermine the advantages of AOT and server-side rendering somewhat. Modern versions of control suites such as _Wijmo 5_ and _Kendo UI for Angular_ no longer have a dependency on _jQuery_ (unlike their predecessors).