`ReferenceError: CSS is not defined` while working with universal on angular 5.

[nishkarsh]

Bug:

Angular 5 material doesn't seem to work with universal.

What is the expected behavior?

Angular 5 material should work properly with server side rendering using universal.

What is the current behavior?

When I tried building and running an angular 5 app that used material and universal, it failed to perform server side rendering when the homepage had material components. It spat the following error:

ERROR { Error: Uncaught (in promise): ReferenceError: CSS is not defined
    ReferenceError: CSS is not defined
    at new Platform (/Users/project/node_modules/@angular/cdk/bundles/cdk-platform.umd.js:44:80)
    at _createClass (/Users/project/node_modules/@angular/core/bundles/core.umd.js:10911:20)
    at _createProviderInstance$1 (/Users/project/node_modules/@angular/core/bundles/core.umd.js:10887:26)
    at resolveNgModuleDep (/Users/project/node_modules/@angular/core/bundles/core.umd.js:10872:17)
    at NgModuleRef_.get (/Users/project/node_modules/@angular/core/bundles/core.umd.js:12109:16)
    at resolveDep (/Users/project/node_modules/@angular/core/bundles/core.umd.js:12599:45)
    at createClass (/Users/project/node_modules/@angular/core/bundles/core.umd.js:12469:32)
    at createDirectiveInstance (/Users/project/node_modules/@angular/core/bundles/core.umd.js:12306:37)
    at createViewNodes (/Users/project/node_modules/@angular/core/bundles/core.umd.js:13764:53)
    at callViewAction (/Users/project/node_modules/@angular/core/bundles/core.umd.js:14198:13)
    at resolvePromise (/Users/project/node_modules/zone.js/dist/zone-node.js:809:31)
    at resolvePromise (/Users/project/node_modules/zone.js/dist/zone-node.js:775:17)
    at /Users/project/node_modules/zone.js/dist/zone-node.js:858:17
    at ZoneDelegate.invokeTask (/Users/project/node_modules/zone.js/dist/zone-node.js:421:31)
    at Object.onInvokeTask (/Users/project/node_modules/@angular/core/bundles/core.umd.js:4763:33)
    at ZoneDelegate.invokeTask (/Users/project/node_modules/zone.js/dist/zone-node.js:420:36)
    at Zone.runTask (/Users/project/node_modules/zone.js/dist/zone-node.js:188:47)
    at drainMicroTaskQueue (/Users/project/node_modules/zone.js/dist/zone-node.js:595:35)
    at ZoneTask.invokeTask (/Users/project/node_modules/zone.js/dist/zone-node.js:500:21)
    at Server.ZoneTask.invoke (/Users/project/node_modules/zone.js/dist/zone-node.js:485:48)

The error seem to be occurring in cdk at the line that contains:
this.BLINK = this.isBrowser && (!!((/** @type {?} */ (window)).chrome || hasV8BreakIterator) && !!CSS && !this.EDGE && !this.TRIDENT);

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Here is how package.json looks like (including only the dependencies that are relevant):

"dependencies": {
    "@angular/animations": "5.1.0",
    "@angular/common": "5.1.0",
    "@angular/compiler": "5.1.0",
    "@angular/core": "5.1.0",
    "@angular/forms": "5.1.0",
    "@angular/http": "5.1.0",
    "@angular/platform-browser": "5.1.0",
    "@angular/platform-browser-dynamic": "5.1.0",
    "@angular/platform-server": "5.1.0",
    "@angular/router": "5.1.0",
    "@angular/material": "5.1.0",
    "@angular/cdk": "5.1.0"
},
"devDependencies": {
    "@angular/cli": "1.6.6",
    "@angular/compiler-cli": "^5.1.0",
    "@angular/language-service": "^5.1.0"
}

Is there anything else we should know?

On performing some research, found that users were facing this issue in the earlier versions of material but seems to have got fixed in the later versions. I am aware that material is still not fully compatible with universal but I have tried it with different combinations of mat components (even with just a mat button or a mat input).

[nishkarsh]

Okay, it seems there was another relevant dependency. recordrtc": "5.4.6". I am not even sure why this would happen but this issue occurred with use of recordrtc (particularly due to this.recordRTC = RecordRTC(stream, options); statement). I will try to figure out why due to this an error occurred in cdk, but thought it might help someone to explain this better.

[jelbourn]

@crisbeto should be easy enough to gate that one symbol

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}