angular / universal

Server-side rendering and Prerendering for Angular
MIT License
4.04k stars 484 forks source link

Getting error while Angular Universal server running related to cookie #1094

Closed dexbytesmanish closed 5 years ago

dexbytesmanish commented 5 years ago

Bug Report

What is the expected behavior?

It should not show any error in terminal after running universal server and should render server side rendered page content that can be verified in view source in browser on other than home page routes and lazy loaded modules routes.

What is the current behavior?

I am getting following error in terminal after running npm run server command and opening http://localhost:8080 URL in browser :

ERROR { Error: Uncaught (in promise): Error: This method is not implemented in DominoAdapter: getCookie Error: This method is not implemented in DominoAdapter: getCookie at _notImplemented (/var/www/html/project-angular6/dist/server.js:87272:12) at DominoAdapter.module.exports.DominoAdapter.getCookie (/var/www/html/project-angular6/dist/server.js:87463:65) at CookieXSRFStrategy.module.exports.CookieXSRFStrategy.configureRequest (/var/www/html/project-angular6/dist/server.js:76600:101) at XHRBackend.module.exports.XHRBackend.createConnection (/var/www/html/project-angular6/dist/server.js:76641:28) at httpRequest (/var/www/html/project-angular6/dist/server.js:77008:20) at Http.module.exports.Http.request (/var/www/html/project-angular6/dist/server.js:77106:34) at Http.module.exports.Http.get (/var/www/html/project-angular6/dist/server.js:77117:21) at topbannerService.module.exports../src/app/home/top-banner/top-banner.service.ts.topbannerService.getTopFeatureData (/var/www/html/project-angular6/dist/server.js:154860:26) at TopBannerComponent.module.exports../src/app/home/top-banner/top-banner.component.ts.TopBannerComponent.getTopFeaturedArtworks (/var/www/html/project-angular6/dist/server.js:154815:31) at new TopBannerComponent (/var/www/html/project-angular6/dist/server.js:154811:14) at resolvePromise (/var/www/html/project-angular6/dist/server.js:117327:31) at resolvePromise (/var/www/html/project-angular6/dist/server.js:117284:17) at /var/www/html/project-angular6/dist/server.js:117386:17 at ZoneDelegate.module.exports.ZoneDelegate.invokeTask (/var/www/html/project-angular6/dist/server.js:116934:31) at Object.onInvokeTask (/var/www/html/project-angular6/dist/server.js:4204:33) at ZoneDelegate.module.exports.ZoneDelegate.invokeTask (/var/www/html/project-angular6/dist/server.js:116933:36) at Zone.module.exports.Zone.runTask (/var/www/html/project-angular6/dist/server.js:116701:47) at drainMicroTaskQueue (/var/www/html/project-angular6/dist/server.js:117108:35) at module.exports.ZoneTask.invokeTask (/var/www/html/project-angular6/dist/server.js:117013:21) at Server.ZoneTask.invoke (/var/www/html/project-angular6/dist/server.js:116998:48)

and not able to see server side rendered page content in view source on other than home page routes and lazy loaded modules routes.

What modules are related to this issue?

- [x] DominoAdapter
- [ ] common
- [ ] express-engine
- [ ] hapi-engine
- [ ] module-map-ngfactory-loader

Minimal reproduction with instructions:

I have followed this tutorial to setup Universal : https://www.devglan.com/angular/angular-universal-server-side-rendering. I am getting error where I am calling API to get data in following code : in component.ts : this.topbannerService.getTopFeatureData().subscribe(data=>{ }) topbannerUrl = this._global.baseAPIUrl+"home-page-top-featured";

in service.ts: getTopFeatureData(){ return this.http.get(this.topbannerUrl) .pipe( map(res =>this.extractData(res)), catchError(err => this.handleError(err)) ); }

What is the use-case or motivation for changing an existing behavior?

To be able to server-side render Angular app using Angular Universal.

Environment:

{ "name": "frontend4", "version": "0.0.0", "license": "MIT", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build --prod", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e", "build:server:prod": "ng run frontend4:server && webpack --config webpack.server.config.js --progress --colors", "build:browser:prod": "ng build --prod", "build:prod": "npm run build:server:prod && npm run build:browser:prod", "server": "node local.js" }, "private": true, "dependencies": { "@angular/animations": "^6.1.10", "@angular/common": "^6.1.7", "@angular/compiler": "^6.1.7", "@angular/core": "^6.1.7", "@angular/forms": "^6.1.7", "@angular/http": "^6.1.7", "@angular/platform-browser": "^6.1.10", "@angular/platform-browser-dynamic": "^6.1.7", "@angular/platform-server": "^6.1.10", "@angular/pwa": "^0.8.1", "@angular/router": "^6.1.7", "@angular/service-worker": "^6.1.10", "@durwella/zoomable-canvas": "^1.1.0", "@fortawesome/angular-fontawesome": "^0.2.0", "@fortawesome/fontawesome-svg-core": "^1.2.4", "@fortawesome/free-brands-svg-icons": "^5.3.1", "@fortawesome/free-solid-svg-icons": "^5.3.1", "@hallysonh/ngx-imageviewer": "^2.0.4", "@livechat/angular-widget": "0.0.6", "@ng-select/ng-select": "^2.8.1", "@ng-toolkit/universal": "^1.1.47", "@nguniversal/express-engine": "^7.0.2", "@nguniversal/module-map-ngfactory-loader": "^7.0.2", "@ngx-share/button": "^6.0.1", "@ngx-share/buttons": "^6.0.1", "@ngx-share/core": "^6.0.1", "ajv": "^6.5.3", "angular-custom-modal": "^1.2.0", "angular-socialshare": "^2.3.11", "angular2-cookie-law": "^6.0.4", "angularx-social-login": "^1.2.3", "bootstrap": "^4.1.3", "core-js": "^2.4.1", "cors": "~2.8.4", "fast-deep-equal": "^2.0.1", "fast-json-stable-stringify": "^2.0.0", "font-awesome": "^4.7.0", "hammerjs": "^2.0.8", "imagesloaded": "^4.1.4", "json-schema-traverse": "^0.4.1", "lodash": "^4.17.11", "masonry-layout": "^4.2.2", "ng-bootstrap-form-validation": "^2.1.0", "ng-click-outside": "^4.0.0", "ng-masonry-grid": "^1.2.5", "ng-multiselect-dropdown": "^0.2.1", "ng-sidebar": "^8.0.0", "ng2-scroll-to": "^1.0.7", "ng2-scroll-to-el": "^1.2.1", "ng2-social-share": "0.0.10", "ng2-sticky-kit": "^5.3.0", "ng5-slider": "^1.1.3", "ngx-bootstrap": "^3.0.1", "ngx-custom-validators": "^6.1.0", "ngx-image-viewer": "^1.0.10", "ngx-infinite-scroll": "^6.0.1", "ngx-masonry": "^1.1.2", "ngx-paypal": "^3.2.1", "ngx-pinch-zoom": "^1.2.0", "ngx-select-dropdown": "^0.7.1", "ngx-slick": "^0.2.1", "ngx-smart-modal": "^7.0.3", "primeng": "^6.1.5", "react-livechat": "^1.0.28", "rxjs": "^6.3.2", "rxjs-compat": "^6.3.2", "ts-loader": "4.2.0", "typescript": "^2.9.2", "web-animations-js": "^2.3.1", "webpack-cli": "^3.1.2", "zone.js": "^0.8.19" }, "devDependencies": { "@angular-devkit/build-angular": "~0.8.1", "@angular-devkit/core": "^0.8.1", "@angular/cli": "^6.2.1", "@angular/compiler-cli": "^6.1.7", "@angular/language-service": "^6.1.7", "@types/jasmine": "~2.8.3", "@types/jasminewd2": "~2.0.2", "@types/lodash": "^4.14.116", "@types/node": "~10.9.4", "codelyzer": "^4.0.1", "jasmine-core": "~3.2.1", "jasmine-spec-reporter": "~4.2.1", "karma": "~3.0.0", "karma-chrome-launcher": "~2.2.0", "karma-coverage-istanbul-reporter": "^2.0.4", "karma-jasmine": "~1.1.0", "karma-jasmine-html-reporter": "^1.3.1", "protractor": "^5.4.1", "regexp-replace-loader": "^1.0.1", "ts-node": "~7.0.1", "tslint": "~5.11.0" } }


Angular CLI: 6.2.6
Node: 10.10.0
OS: linux x64
Angular: 6.1.10
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, platform-server, router
... service-worker

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.8.6
@angular-devkit/build-angular     0.8.6
@angular-devkit/build-optimizer   0.8.6
@angular-devkit/build-webpack     0.8.6
@angular-devkit/core              0.8.6
@angular-devkit/schematics        0.8.6
@angular/cli                      6.2.6
@angular/pwa                      0.8.6
@ngtools/webpack                  6.2.6
@schematics/angular               0.8.6
@schematics/update                0.8.6
rxjs                              6.3.3
typescript                        2.9.2
webpack                           4.23.1

#### Is there anything else we should know?
No
CaerusKaru commented 5 years ago

This is not a bug. Cookies are not supported natively in Angular’s server DOM implementation. You will have to mock it out or come up with another solution. StackOverflow or Gitter are better avenues for help with this

dexbytesmanish commented 5 years ago

I already know and understand that Cookies are not supported natively in Angular's server DOM implementation, also I am not asking to support the same. I am just seeking help to know why this error is coming even when when I am not using any Cookie in my code and I want help to fix this error.

I want help to know whether I am making any mistake to implement Angular Universal and if not then this error is normal in Universal and continue to occur and I won't be able to use Angular Universal if this error is occuring.

CaerusKaru commented 5 years ago

I understand this, and I’m saying that some part of your app is using an unsupported API, and it is not the fault of Universal. This repo is only for issues or feature requests with Universal, it is not a support forum.

CaerusKaru commented 5 years ago

To clarify, since you opened an issue on the domino repository, this is not a problem with Domino, and it's not a problem with Angular Universal. You are consuming some library that is making a call to getCookie, which is not supported by either implementation. You are free to create a polyfill for this call on the server to work around this, or not use that library on the server. Either way, it's not an issue with these packages.

dexbytesmanish commented 5 years ago

Ok, can you please help/guide me to create polyfill for this kind of issue ?

On Tue, Nov 27, 2018 at 9:06 AM CaerusKaru notifications@github.com wrote:

To clarify, since you opened an issue on the domino repository, this is not a problem with Domino, and it's not a problem with Angular Universal. You are consuming some library that is making a call to getCookie, which is not supported by either implementation. You are free to create a polyfill for this call on the server to work around this, or not use that library on the server. Either way, it's not an issue with these packages.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/angular/universal/issues/1094#issuecomment-441889669, or mute the thread https://github.com/notifications/unsubscribe-auth/AlP6ZVBRY4ltEOL4ELYjlxJthAXMBUtoks5uzLMogaJpZM4Ysuej .

CaerusKaru commented 5 years ago

No, as I mentioned already, this is not a support forum and a better avenue for getting help is StackOverflow or Gitter