ReferenceError: CSS is not defined with @angular/material@2.0.0-beta.6

[ethanroday]

Bug

Calling ng-render results in the following error with @angular/material@2.0.0-beta.6:

Could not find Angular Material core theme. Most Material components may not work as expected. For more info refer to the theming guide: https://material.angular.io/guide/theming
Unhandled Promise rejection: CSS is not defined ; Zone: <root> ; Task: Promise.then ; Value: { ReferenceError: CSS is not defined
    at new t (C:\Users\etroday\AppData\Local\Temp\6412b9a215543\0.js:6:10790)
    at NgModuleInjector.get (ng:///t/module.ngfactory.js:155:47)
    at NgModuleInjector.tInjector.getInternal (ng:///t/module.ngfactory.js:253:41)
    at NgModuleInjector.get (<path-to-app>\node_modules\@angular\core\bundles\core.umd.js:3584:44)
    at resolveDep (<path-to-app>\node_modules\@angular\core\bundles\core.umd.js:11046:45)
    at createClass (<path-to-app>\node_modules\@angular\core\bundles\core.umd.js:10910:32)
    at createDirectiveInstance (<path-to-app>\node_modules\@angular\core\bundles\core.umd.js:10730:37)
    at createViewNodes (<path-to-app>\packages\core\src\view\view.ts:292:12)
    at callViewAction (<path-to-app>\node_modules\@angular\core\bundles\core.umd.js:12537:13)
    at execComponentViewsAction (<path-to-app>\node_modules\@angular\core\bundles\core.umd.js:12446:13)
    at createViewNodes (<path-to-app>\node_modules\@angular\core\bundles\core.umd.js:12120:5)
    at createRootView (<path-to-app>\node_modules\@angular\core\bundles\core.umd.js:11998:5)
    at callWithDebugContext (<path-to-app>\packages\core\src\view\services.ts:647:1)
    at Object.debugCreateRootView [as createRootView] (<path-to-app>\node_modules\@angular\core\bundles\core.umd.js:12673:12)
    at ComponentFactory_.create (<path-to-app>\node_modules\@angular\core\bundles\core.umd.js:9919:46)
    at ComponentFactoryBoundToModule.create (<path-to-app>\node_modules\@angular\core\bundles\core.umd.js:3455:29)

Steps to Reproduce

1. Create a new project using the Angular CLI with ng new.
2. Run npm install --save @angular/material @angular/animations.
3. Import BrowserAnimationsModule and MdButtonModule in the app module.
4. Add a Material theme. For example, include the following in index.html:

<link href="./node_modules/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">

5. In app.component.ts, replace {{title}} with <button md-button>{{title}}</button>
6. Run ng build followed by node_modules\.bin\ng-render

[pcalulo]

This affects me as well, except my case uses on-demand rendering. The fun part is that for on-demand this can be worked around by adding the following to the server component (index.ts, as I followed the express example):

global['CSS'] = undefined;

This appears to be caused by Angular Material's browser checking logic.

I have yet to dive into angular-ssr's code itself, but @clbond would it be possible (or desirable -- I'm still feeling my way around) to add the one-line workaround above into angular-ssr itself?

[clbond]

I will take a look at this. The last version of material I tested was beta.3.

[clbond]

This is resolved. Please verify that 0.10.19 fixes this issue for you.

[clbond]

Actually verify using the latest version, not 19. 19 had a separate serious bug

[pcalulo]

Sorry for taking a while to check -- I can confirm that, at least for my case, this bug is now fixed. Commented out my own workaround, and the serverside render still works as expected. Thanks!

[ethanroday]

@clbond My project has altered its technology stack a bit recently, so I don't have an easy way to test anymore. I will consider this resolved in light of @lugkhast's verification.

[BlankHrt]

Have you solve it yet?