How to fix cookie NotYetImplemented issue with domino and Angular universal ssr? - node.js

Question

import 'zone.js/dist/zone-node';
import 'localstorage-polyfill';
global['localStorage'] = localStorage
import {APP_BASE_HREF} from '#angular/common';
import {ngExpressEngine} from '#nguniversal/express-engine';
import * as express from 'express';
import {existsSync, readFileSync} from 'fs';
import {join} from 'path';
import * as cookieparser from 'cookie-parser';
import { REQUEST, RESPONSE } from '#nguniversal/express-engine/tokens';
// ssr DOM
const domino = require('domino');
const fs = require('fs');
const path = require('path');
// Use the browser index.html as template for the mock window
const template = fs.readFileSync(path.join(process.cwd(), '.', 'dist/functions/browser', 'index.html')).toString();
console.log(template)
const win = domino.createWindow(template);
global['window'] = win;
global['document'] = win.document;
global['self'] = win;
global['IDBIndex'] = win.IDBIndex;
global['navigator'] = win.navigator;
import {AppServerModule} from './src/main.server';
import { environment } from 'src/environments/environment';
import { globalAgent } from 'http';
// The Express app is exported so that it can be used by serverless Functions.
export function app(): express.Express {
const server = express();
const websiteFileLocation = environment.production ? "browser" : "dist/functions/browser"
const distFolder = join(process.cwd(), websiteFileLocation);
const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index';
server.use(cookieparser());
// Our Universal express-engine (found # https://github.com/angular/universal/tree/main/modules/express-engine)
server.engine('html', ngExpressEngine({
bootstrap: AppServerModule,
}));
server.set('view engine', 'html');
server.set('views', distFolder);
// Example Express Rest API endpoints
// server.get('/api/**', (req, res) => { });
// Serve static files from /browser
server.get('*.*', express.static(distFolder, {
maxAge: '1y'
}));
// All regular routes use the Universal engine
server.get('*', (req, res) => {
res.render(indexHtml, { req, res, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }, {provide: REQUEST, useValue: req},
{provide: RESPONSE, useValue: res}] });
});
return server;
}
function run(): void {
const port = process.env['PORT'] || 4000;
// Start up the Node server
const server = app();
server.listen(port, () => {
console.log(`Node Express server listening on http://localhost:${port}`);
});
}
// Webpack will replace 'require' with '__webpack_require__'
// '__non_webpack_require__' is a proxy to Node 'require'
// The below code is to ensure that the server is run only when not requiring the bundle.
declare const __non_webpack_require__: NodeRequire;
const mainModule = __non_webpack_require__.main;
const moduleFilename = mainModule && mainModule.filename || '';
run();
export * from './src/main.server';
that is my server.ts
import { NgModule } from '#angular/core';
import { ServerModule } from '#angular/platform-server';
import { AppModule } from './app.module';
import { AppComponent } from './app.component';
import { ServerCookiesModule } from 'ngx-universal-cookies/server';
import { BrowserModule } from '#angular/platform-browser';
import { CookieBackendModule } from 'ngx-cookie-backend';
#NgModule({
imports: [
AppModule,
ServerModule,
CookieBackendModule.withOptions()
],
bootstrap: [AppComponent],
})
export class AppServerModule {}
this is app.server.module.ts
I try to run npm run dev:ssr and it fails to start and get the error
C:\Users\Fujitsu\terabulk\terabulk-front-ssr\dist\functions\server\main.js:92809
throw new Error("NotYetImplemented");
^
Error: NotYetImplemented
at Document.exports.nyi (C:\Users\Fujitsu\terabulk\terabulk-front-ssr\dist\functions\server\main.js:92809:9)
at CookiesStorage.getAllItems (C:\Users\Fujitsu\terabulk\terabulk-front-ssr\dist\functions\server\main.js:127014:46)
at new CookiesStorage (C:\Users\Fujitsu\terabulk\terabulk-front-ssr\dist\functions\server\main.js:126929:10)
at Module.89257 (C:\Users\Fujitsu\terabulk\terabulk-front-ssr\dist\functions\server\main.js:127102:24)
at __webpack_require__ (C:\Users\Fujitsu\terabulk\terabulk-front-ssr\dist\functions\server\main.js:365916:42)
at Object.28011 (C:\Users\Fujitsu\terabulk\terabulk-front-ssr\dist\functions\server\main.js:799:21)
at __webpack_require__ (C:\Users\Fujitsu\terabulk\terabulk-front-ssr\dist\functions\server\main.js:365916:42)
at Object.34440 (C:\Users\Fujitsu\terabulk\terabulk-front-ssr\dist\functions\server\main.js:631:12)
at __webpack_require__ (C:\Users\Fujitsu\terabulk\terabulk-front-ssr\dist\functions\server\main.js:365916:42)
at Object.90158 (C:\Users\Fujitsu\terabulk\terabulk-front-ssr\dist\functions\server\main.js:94:39)
A server error has occurred.
node exited with 1 code.
connect ECONNREFUSED 127.0.0.1:58554
angular.json
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"cli": {
"analytics": "8be174a3-843d-4fe9-8af7-242a16b597a4"
},
"version": 1,
"newProjectRoot": "projects",
"projects": {
"paddybaba2": {
"projectType": "application",
"schematics": {
"#schematics/angular:application": {
"strict": true
}
},
"root": "",
"sourceRoot": "src",
"prefix": "terabulk",
"i18n": {
"sourceLocale": {
"code": "en"
},
"locales": {
"zh": "translate/messages5.cn.xlf",
"ru": "translate/messages.ru.xlf",
"de": "translate/messages.de.xlf",
"ga": "translate/messages.ga.xlf",
"es": "translate/messages.es.xlf"
}
},
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/functions/browser",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"node_modules/animate.css/animate.min.css",
"src/styles.scss",
"./node_modules/ngx-lightbox/lightbox.css",
"node_modules/#videogular/ngx-videogular/fonts/videogular.css",
"src/style-variables.scss"
],
"scripts": [],
"localize": false
},
"configurations": {
"en": {
"localize": [
"en"
]
},
"cn": {
"localize": [
"zh"
]
},
"ru": {
"localize": [
"ru"
]
},
"de": {
"localize": [
"de"
]
},
"ga": {
"localize": [
"ga"
]
},
"es": {
"localize": [
"es"
]
},
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "5000kb",
"maximumError": "10mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "16kb",
"maximumError": "400kb"
}
],
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"outputHashing": "all"
},
"development": {
"buildOptimizer": false,
"optimization": false,
"vendorChunk": true,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true
}
},
"defaultConfiguration": "production"
},
"serve": {
"builder": "#angular-devkit/build-angular:dev-server",
"configurations": {
"en": {
"browserTarget": "paddybaba2:build:en"
},
"cn": {
"browserTarget": "paddybaba2:build:cn"
},
"ru": {
"browserTarget": "paddybaba2:build:ru"
},
"de": {
"browserTarget": "paddybaba2:build:de"
},
"es": {
"browserTarget": "paddybaba2:build:es"
},
"ga": {
"browserTarget": "paddybaba2:build:ga"
},
"production": {
"browserTarget": "paddybaba2:build:production"
},
"development": {
"browserTarget": "paddybaba2:build:development"
}
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"builder": "#angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "paddybaba2:build"
}
},
"test": {
"builder": "#angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css"
],
"scripts": []
}
},
"deploy": {
"builder": "#angular/fire:deploy",
"options": {
"prerender": false,
"ssr": false,
"browserTarget": "paddybaba2:build:production",
"firebaseProject": "terabulk2",
"firebaseHostingSite": "terabulk2"
}
},
"server": {
"builder": "#angular-devkit/build-angular:server",
"options": {
"outputPath": "dist/functions/server",
"main": "server.ts",
"tsConfig": "tsconfig.server.json"
},
"configurations": {
"en": {},
"cn": {},
"ru": {},
"de": {},
"ga": {},
"es": {},
"production": {
"outputHashing": "media",
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
]
},
"development": {
"optimization": false,
"sourceMap": true,
"extractLicenses": false
}
},
"defaultConfiguration": "production"
},
"serve-ssr": {
"builder": "#nguniversal/builders:ssr-dev-server",
"configurations": {
"development": {
"browserTarget": "paddybaba2:build:development",
"serverTarget": "paddybaba2:server:development"
},
"production": {
"browserTarget": "paddybaba2:build:production",
"serverTarget": "paddybaba2:server:production"
}
},
"defaultConfiguration": "development"
},
"prerender": {
"builder": "#nguniversal/builders:prerender",
"options": {
"routes": [
"/"
]
},
"configurations": {
"production": {
"browserTarget": "paddybaba2:build:production",
"serverTarget": "paddybaba2:server:production"
},
"development": {
"browserTarget": "paddybaba2:build:development",
"serverTarget": "paddybaba2:server:development"
}
},
"defaultConfiguration": "production"
}
}
}
},
"schematics": {
"#schematics/angular:component": {
"style": "scss"
}
}
}
package.json
{
"name": "paddybaba2",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test",
"build-all": "ng build --configuration en --deleteOutputPath=false && ng build --configuration cn --deleteOutputPath=false && ng build --configuration ru --deleteOutputPath=false && echo internationalization build all languages finished. && ws",
"deploy": "ng build --localize=true && firebase deploy",
"push": "git add . && git commit -m %npm_config_msg% && git push -u origin main",
"deploy-blog": "ng build --localize=true && cd .. && cd terabulk-blog && ng build --output-path C:\\Users\\Fujitsu\\terabulk\\terabulk-front\\public\\blog --base-href /blog/ && cd .. && cd terabulk-front && firebase deploy",
"dev:ssr": "ng run paddybaba2:serve-ssr",
"serve:ssr": "node dist/paddybaba2/server/main.js",
"build:ssr": "ng build && ng run paddybaba2:server",
"prerender": "ng run paddybaba2:prerender"
},
"private": true,
"dependencies": {
"#angular/animations": "^14.1.3",
"#angular/cdk": "^14.1.2",
"#angular/common": "^14.1.3",
"#angular/compiler": "^14.1.3",
"#angular/core": "^14.1.3",
"#angular/fire": "^7.4.1",
"#angular/forms": "^14.1.3",
"#angular/platform-browser": "^14.1.3",
"#angular/platform-browser-dynamic": "^14.1.3",
"#angular/platform-server": "^14.1.3",
"#angular/router": "^14.1.3",
"#bugsplat/ngx-animated-counter": "^2.0.0",
"#ng-select/ng-select": "^9.0.2",
"#nguniversal/express-engine": "^14.1.0",
"#nguniversal/module-map-ngfactory-loader": "^8.2.6",
"#stomp/stompjs": "^6.1.2",
"#syncfusion/ej2-notifications": "^20.1.47",
"#types/socket.io": "^3.0.2",
"#videogular/ngx-videogular": "^6.0.0",
"angular-cc-library": "^3.0.1",
"angular-file-saver": "^1.1.3",
"angular-progress-bar": "^1.0.11",
"angular-responsive-carousel": "^2.1.2",
"angular-shorturl": "^0.1.7",
"angular2-toaster": "^11.0.1",
"animate.css": "^4.1.1",
"canvas": "^2.9.3",
"cookie-parser": "^1.4.6",
"domino": "^2.1.6",
"express": "^4.15.2",
"fabric": "^5.2.1",
"file-saver": "^2.0.5",
"jsdom-canvas-2": "^11.6.3-alpha.0",
"localstorage-polyfill": "^1.0.1",
"lodash.get": "^4.4.2",
"lodash.isequal": "^4.5.0",
"lodash.merge": "^4.6.2",
"lodash.set": "^4.3.2",
"net": "^1.0.2",
"ng-animate": "^1.0.0",
"ng-pattern-restrict": "^0.2.3",
"ng-popups": "^9.0.0",
"ng-tiny-url": "^1.0.2",
"ngx-clipboard": "^15.1.0",
"ngx-cookie": "^6.0.1",
"ngx-cookie-backend": "^6.0.1",
"ngx-editor": "^11.1.0",
"ngx-filesaver": "^13.0.0",
"ngx-lightbox": "^2.4.1",
"ngx-spinner": "^12.0.0",
"ngx-store": "^3.0.1",
"ngx-universal-cookies": "^8.0.1",
"rxjs": "~6.6.0",
"rxjs-compat": "^6.6.7",
"sockjs-client": "^1.5.2",
"stompjs": "^2.3.3",
"three.js": "^0.77.0",
"ts-debug": "^1.3.0",
"tslib": "^2.3.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"#angular-devkit/build-angular": "^14.1.3",
"#angular/cli": "^14.1.3",
"#angular/compiler-cli": "^14.1.3",
"#angular/localize": "^14.1.3",
"#nguniversal/builders": "^14.1.0",
"#types/cookie-parser": "^1.4.3",
"#types/core-js": "^2.5.5",
"#types/express": "^4.17.0",
"#types/jasmine": "~3.8.0",
"#types/node": "^12.11.1",
"#types/sockjs-client": "^1.5.1",
"#types/stompjs": "^2.3.5",
"jasmine-core": "~3.8.0",
"jsdom": "20.0.0",
"jsdom-global": "3.0.2",
"karma": "~6.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "~1.7.0",
"typescript": "~4.6.4"
}
}
it is a large project can't fit everything in here but i can add your requested code if needs be. I believe the problem lies with domino not being able to work with cookies. I need to do this so i can deploy to firebase with ssr.
As you can see I am using ngx-store, this provides decorators that can automatically store variables to localStorage. I don't think it has universal support. Do you know of anyway to polyfill or shim it?