Cannot read property 'initialise' of undefined in angular universal 10

[nilot111]

Bug Report or Feature Request (mark with an x)

- [x] bug report -> please search issues before submitting
- [ ] feature request

CookieConsent and Library Versions?

- cookieconsent version: 3.1.1
- ngx-cookieconsent version: 2.2.3

OS Version?

Windows 10

Angular, Node and al Versions?

Angular CLI: 10.0.3
Node: 14.5.0
OS: win32 x64
Angular: 10.0.4
... animations, common, compiler, compiler-cli, core, forms
... language-service, localize, platform-browser
... platform-browser-dynamic, platform-server, router
Ivy Workspace: Yes

Package Version

@angular-devkit/architect 0.1000.3
@angular-devkit/build-angular 0.1000.3
@angular-devkit/build-optimizer 0.1000.3
@angular-devkit/build-webpack 0.1000.3
@angular-devkit/core 10.0.3
@angular-devkit/schematics 10.0.3
@angular/cdk 10.1.3
@angular/cli 10.0.3
@ngtools/webpack 10.0.3
@nguniversal/builders 10.0.1
@nguniversal/common 10.0.1
@nguniversal/express-engine 10.0.1
@nguniversal/module-map-ngfactory-loader 8.2.6
@schematics/angular 10.0.3
@schematics/update 0.1000.3
rxjs 6.6.0
typescript 3.9.7
webpack 4.43.0

Repro steps

npm run build:ssr && npm run serve:ssr
Where:
"serve:ssr": "node dist/compy/server/main.js",
"build:ssr": "ng build --prod && ng run compy:server:production",

The log given by the failure

Node Express server listening on http://localhost:4000
ERROR TypeError: Cannot read property 'initialise' of undefined
at NgcCookieConsentService.init (C:\Coding\compyFront\dist\compy\server\main.js:1:3482889)
at new NgcCookieConsentService (C:\Coding\compyFront\dist\compy\server\main.js:1:3482119)
at Object.NgcCookieConsentService_Factory [as factory] (C:\Coding\compyFront\dist\compy\server\main.js:1:3484065)
at R3Injector.hydrate (C:\Coding\compyFront\dist\compy\server\main.js:1:2802301)
at R3Injector.get (C:\Coding\compyFront\dist\compy\server\main.js:1:2799033)
at NgModuleRef$1.get (C:\Coding\compyFront\dist\compy\server\main.js:1:2977443)
at Object.get (C:\Coding\compyFront\dist\compy\server\main.js:1:2946537)
at getOrCreateInjectable (C:\Coding\compyFront\dist\compy\server\main.js:1:2713691)
at Module.ɵɵdirectiveInject (C:\Coding\compyFront\dist\compy\server\main.js:1:2832947)
at NodeInjectorFactory.AppComponent_Factory [as factory] (C:\Coding\compyFront\dist\compy\server\main.js:1:1694986)

Desired functionality

I would like to run it without any problem in angular universal (server side rendering), since it is running perfect in regular angular.

Mention any other details that might be useful

It works great in regular app, but fail in universal angular app, so i think it is mainly due to trying to open up a window o dialog when running in server side mode. Or the other, it is possible that some way i need to add it in other places apart of angular.json config file.
Please any file you need just tell me , i just can not post entire project since it is private, but i can delivery single files without issue.
Thanks in advance.

[ihor-lev]

A conditional check for global window object in cookieconsent.service.ts seems to be not working on a current Angular 10 server-side rendering.

My quick workaround was to add an empty function in server.ts.

const distFolder = join(process.cwd(), 'dist/browser');
const template = readFileSync(join(distFolder, 'index.html')).toString();
const domino = require('domino');
const win = domino.createWindow(template);

global['window'] = win;
global['window']['cookieconsent'] = { initialise: function () {
        console.warn('Cookie consent is not working on server side');
} };

This is sufficient to make the angular server working.

[nilot111]

Thank you so much, that really works perfect. Just one more simple question, how do you solve to only show once? , since even when i accepted if i refresh it appears again, i suppose it should be something about saving cookies when accepting consent but not sure how to properly do it..

[ihor-lev]

@nilot111: I've noticed that a cookie consent appears after refresh again just yesterday. Seems it worked fine (didn't appear after acceptance) in my previous angular not-SSR version. I'm still investigating why it's happening and how this plugin handles a one-time showing popup. If nothing helps I think I would use the browser's local storage to save the info about that user accepted cookies. Not perfect of course, but at my project, it's urgent to be fixed.

[ihor-lev]

@nilot111: I found out that the plugin adds a "cookieconsent_status" field with value "dismiss" when user accepts cookies. It may be checked in Chrome Dev Tools > Application > Storage > Cookies.

I think that I've introduced the bug myself (bug when a cookie popup shows all the time). I changed a domain property in cookie config:

export const cookieConfig: NgcCookieConsentConfig = {
    cookie: {
        domain: environment.domain // previously was: `window.location.hostname`
    },
    ...
}

But I had to do that in order to fix a "window is undefined" issue in Angular SSR build. So probably the config update in a browser on the fly should work. Somewhere in app.component.ts:

import { isPlatformBrowser } from '@angular/common';
import { Inject, Injectable, PLATFORM_ID } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
   
    constructor(@Inject(PLATFORM_ID) private platformId: Object) {
    }
    
    ngOnInit() {
        if (isPlatformBrowser(PLATFORM_ID) {
            this.cookieService.getConfig().cookie.domain = window.location.hostname;
        }
    }
    ...
}