Angular Universal not working with Angular 6

[gopal-augment]

Describe the bug

I have tried using Angular Universal in my project. it seems error in ucWidget.component.js

myproject@0.0.0 serve:ssr /var/www/html/myproject-univ/myproject_ui node dist-user/server /var/www/html/myproject-univ/myproject_ui/dist-user/server.js:82076 throw new Error("NotYetImplemented"); Error: NotYetImplemented at HTMLCanvasElement.exports.nyi (/var/www/html/myproject-univ/myproject_ui/dist-user/server.js:82076:9) at /var/www/html/myproject-univ/myproject_ui/dist-user/server.js:334771:35 at /var/www/html/myproject-univ/myproject_ui/dist-user/server.js:334772:4 at /var/www/html/myproject-univ/myproject_ui/dist-user/server.js:334463:28 at Object. (/var/www/html/myproject-univ/myproject_ui/dist-user/server.js:334465:2) at webpack_require (/var/www/html/myproject-univ/myproject_ui/dist-user/server.js:20:30) at Object.uploadcare-widget (/var/www/html/myproject-univ/myproject_ui/dist-user/server.js:159701:18) at webpack_require (/var/www/html/myproject-univ/myproject_ui/dist-user/server.js:127982:30) at Module../node_modules/ngx-uploadcare-widget/release/ucWidget/ucWidget.component.js (/var/www/html/myproject-univ/myproject_ui/dist-user/server.js:132039:75) at __webpack_require__ (/var/www/html/myproject-univ/myproject_ui/dist-user/server.js:127982:30) npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! myprojectv3@0.0.0 serve:ssr: node dist-user/server npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the myprojectv3@0.0.0 serve:ssr script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in:

Environment

My package.json file is below `{ "name":"myproject", "version":"0.0.0", "license":"MIT", "scripts":{

}, "private":true, "dependencies":{ "@agm/core":"^1.0.0-beta.3", "@angular/animations":"^6.1.10", "@angular/cdk":"^7.0.0-rc.2", "@angular/common":"^6.1.10", "@angular/compiler":"^6.1.10", "@angular/core":"^6.1.10", "@angular/flex-layout":"^6.0.0-beta.18", "@angular/forms":"^6.1.10", "@angular/http":"^6.1.10", "@angular/material":"^7.0.0-rc.2", "@angular/platform-browser":"^6.1.10", "@angular/platform-browser-dynamic":"^6.1.10", "@angular/platform-server":"^6.1.10", "@angular/router":"^6.1.10", "@fortawesome/angular-fontawesome":"^0.3.0", "@fortawesome/fontawesome-svg-core":"^1.2.17", "@fortawesome/free-solid-svg-icons":"^5.8.1", "@nguniversal/express-engine":"^7.0.2", "@nguniversal/module-map-ngfactory-loader":"v7.0.2", "@types/core-js":"^0.9.46", "angular-6-social-login-v2":"^1.0.5", "angular-draggable":"^1.0.1", "angular-sortablejs":"^2.5.2", "angular-ziggeo":"^1.0.2", "angular2-text-mask":"^9.0.0", "chart.js":"^2.7.2", "chart.piecelabel.js":"^0.15.0", "cluster":"^0.7.7", "core-js":"^2.4.1", "crypto-js":"^3.1.9-1", "express":"^4.15.2", "font-awesome":"^4.7.0", "hammerjs":"^2.0.8", "i":"^0.3.6", "ng-drag-drop":"^5.0.0", "ng2-charts":"^1.6.0", "ng2-drag-drop":"^3.0.2", "ngx-audio-player":"^7.1.3", "ngx-clipboard":"^12.0.0", "ngx-image-gallery":"^1.3.0", "ngx-perfect-scrollbar":"^7.2.0", "ngx-plyr":"^1.2.1", "ngx-uploadcare-widget":"^1.2.5", "node-sass":"^4.11.0", "npm":"^6.5.0", "os":"^0.1.1", "plyr":"^3.5.4", "recordrtc":"^5.5.9", "rxjs":"^6.3.3", "screenfull":"^3.3.3", "sortablejs":"^1.7.0", "time-ago-pipe":"^1.3.2", "uploadcare-widget":"^3.6.0", "webrtc-adapter":"^6.1.2", "ziggeo-client-sdk":"^2.33.4", "zone.js":"^0.8.28" }, "devDependencies":{ "@angular-devkit/build-angular":"~0.8.0", "@angular/cli":"^6.2.9", "@angular/compiler-cli":"^6.1.10", "@angular/language-service":"^6.1.10", "@types/jasmine":"~2.8.3", "@types/jasminewd2":"~2.0.2", "@types/node":"~6.0.60", "codelyzer":"^4.0.1", "jasmine-core":"~2.8.0", "jasmine-spec-reporter":"~4.2.1", "karma":"~2.0.0", "karma-chrome-launcher":"~2.2.0", "karma-coverage-istanbul-reporter":"^1.2.1", "karma-jasmine":"~1.1.0", "karma-jasmine-html-reporter":"^0.2.2", "protractor":"^5.4.2", "ts-loader":"^5.2.0", "ts-node":"~4.1.0", "tslint":"~5.9.1", "typescript":"~2.9.2", "webpack-cli":"^3.1.0" } }

[nd0ut]

Hey @gopal-augment,

Can you try to add those lines at the top of head?

<script type="text/javascript">
  window.UPLOADCARE_MANUAL_START = true;
  window.UPLOADCARE_LIVE = false;
</script>

I can't setup the test environment right now, but it should definitely help. If so, we'll add it to the codebase and release.

The actual problem is that uploadcare-widget when importing tries to initialize itself if it's running in the browser. Since the angular universal uses domino for SSR, the widget thinks it's running in the browser. Flags above should disable this functionality.

[gopal-augment]

Hey @gopal-augment,

Can you try to add those lines at the top of head?

<script type="text/javascript">
  window.UPLOADCARE_MANUAL_START = true;
  window.UPLOADCARE_LIVE = false;
</script>

I can't setup the test environment right now, but it should definitely help. If so, we'll add it to the codebase and release.

The actual problem is that uploadcare-widget when importing tries to initialize itself if it's running in the browser. Since the angular universal uses domino for SSR, the widget thinks it's running in the browser. Flags above should disable this functionality.

No luck. Its same error throwing.

[nd0ut]

No luck. Its same error throwing.

I've tried to reproduce the bug with ssr sample code from the angular 6 docs https://devdocs.io/angular~6/guide/universal with no luck. It's working with no errors.

Could you share your server module? Or better a minimal repo with reproduced bug.

[gopal-augment]

No luck. Its same error throwing.

I've tried to reproduce the bug with ssr sample code from the angular 6 docs https://devdocs.io/angular~6/guide/universal with no luck. It's working with no errors.

Could you share your server module? Or better a minimal repo with reproduced bug.

I figured out something, that is I need window, document. So I used 'domino' package

const domino = require('domino'); const fs = require('fs'); const path = require('path'); // const template = fs.readFileSync(path.join(__dirname, '.', 'dist-user', 'index.html')).toString(); const template = fs.readFileSync(path.join(__dirname, join(DIST_FOLDER, 'index.html'))).toString(); const win = domino.createWindow(template); global['window'] = win; global['document'] = win.document;

Do you have any suggestion on this?

[nd0ut]

@gopal-augment

Yep, I've found it.

You need to disable loading of uploadcare-widget inside domino env.

To do this, you can use null-loader to replace uploadcare-widget with null module.

1. Install null-loader

npm install null-loader --save-dev

2. Add rule to the server webpack config

{
  test: /node_modules\/uploadcare-widget/,
  use: "null-loader",
}

This should work for you.