Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Add support for universal server side rendering

See original GitHub issue

When rendering pages server side is doesn’t work. At least one issue is because of the use of MutationObserver which is browser only.

Here’s the errors is causes.

ERROR ReferenceError: MutationObserver is not defined
    at CloudinaryImage.ngOnInit (/node_modules/@cloudinary/angular-4.x/src/cloudinary-image.component.js:23:29)
    at checkAndUpdateDirectiveInline (/node_modules/@angular/core/bundles/core.umd.js:10868:19)
    at checkAndUpdateNodeInline (/node_modules/@angular/core/bundles/core.umd.js:12364:17)
    at checkAndUpdateNode (/node_modules/@angular/core/bundles/core.umd.js:12303:16)
    at prodCheckAndUpdateNode (/node_modules/@angular/core/bundles/core.umd.js:12997:5)
    at Object.updateDirectives (/dist-server/main.bundle.js:1:155164)
    at Object.updateDirectives (/node_modules/@angular/core/bundles/core.umd.js:12754:72)
    at checkAndUpdateView (/node_modules/@angular/core/bundles/core.umd.js:12270:14)
    at callViewAction (/node_modules/@angular/core/bundles/core.umd.js:12635:21)
    at execComponentViewsAction (/node_modules/@angular/core/bundles/core.umd.js:12567:13)
    at checkAndUpdateView (/node_modules/@angular/core/bundles/core.umd.js:12276:5)
    at callViewAction (/node_modules/@angular/core/bundles/core.umd.js:12635:21)
    at execComponentViewsAction (/node_modules/@angular/core/bundles/core.umd.js:12567:13)
    at checkAndUpdateView (/node_modules/@angular/core/bundles/core.umd.js:12276:5)
    at callViewAction (/node_modules/@angular/core/bundles/core.umd.js:12635:21)
    at execEmbeddedViewsAction (/node_modules/@angular/core/bundles/core.umd.js:12593:17)

TypeError: Cannot read property 'disconnect' of undefined
    at CloudinaryImage.ngOnDestroy (/node_modules/@cloudinary/angular-4.x/src/cloudinary-image.component.js:32:22)
    at callProviderLifecycles (/node_modules/@angular/core/bundles/core.umd.js:11220:18)
    at callElementProvidersLifecycles (/node_modules/@angular/core/bundles/core.umd.js:11189:13)
    at callLifecycleHooksChildrenFirst (/node_modules/@angular/core/bundles/core.umd.js:11173:17)
    at destroyView (/node_modules/@angular/core/bundles/core.umd.js:12509:5)
    at callViewAction (/node_modules/@angular/core/bundles/core.umd.js:12655:13)
    at execComponentViewsAction (/node_modules/@angular/core/bundles/core.umd.js:12567:13)
    at destroyView (/node_modules/@angular/core/bundles/core.umd.js:12508:5)
    at callViewAction (/node_modules/@angular/core/bundles/core.umd.js:12655:13)
    at execEmbeddedViewsAction (/node_modules/@angular/core/bundles/core.umd.js:12593:17)

Issue Analytics

State:
Created 6 years ago
Reactions:1
Comments:7

Top GitHub Comments

2reactions

eitanp461commented, Jan 28, 2018

@mlb6 @Tomdrouv1 @dottodot our latest release should resolve this issue.

You can install it with npm install @cloudinary/angular-5.x@^1.0.1.

0reactions

mlb6commented, Jan 26, 2018

@eitanp461 I’m waiting for this fix. Do you have an ETA for the new version of the library? Is there a way to use your PR with npm ? I’ve tried to change the package.json dependency to use your PR, but it does not seem to work. "@cloudinary/angular-5.x": "cloudinary/cloudinary_angular#universal-rendering",

Top Results From Across the Web

Server-side rendering (SSR) with Angular Universal

This guide describes Angular Universal, a technology that renders Angular applications on the server. A normal Angular application executes in the browser, ...

Angular Universal: Complete Practical Guide

This post will be a complete practical guide for getting started with Angular Universal. We are going to go start with an existing...

How to build an Angular App with Server-Side Rendering

First run npm run build:ssr and when that is completed, run npm run serve:ssr . Your application should be served on localhost:4201. Transfer...

Server-Side Rendering (SSR ) with Angular Universal

Here's a tutorial on how to implement Server-Side Rendering (SSR ) with Angular Universal. Let's learn about SSR, its benefits, and Angular ...

How To Use Angular Universal for Server Side Rendering

Introduction. Single-page Applications (SPAs) consist of a single HTML document that is served initially to a client.