why i am getting cannot read property 'initialise' of undefined at ngx_cookieconsent_NgcCookieConsentService.init in angular universal?

Question

CookieConsent and Library Versions?

- cookieconsent version: 3.1.1
- ngx-cookieconsent version: 2.2.3
- Angular CLI: 10.0.3
- Angular SSR (universal)

I am running the following commands:

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)

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 or 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.

Answer 1

For me the problem was fixed by adding the cookieconsent.min.css and cookieconsent.min.js to the angular.json

"styles": [
            "./node_modules/cookieconsent/build/cookieconsent.min.css"
          ],
          "scripts": [
            "./node_modules/cookieconsent/build/cookieconsent.min.js"
          ]

Answer 2

The NgcCookieConsentService fails to initialize on the server-side because a global window property is undefined. The author in their code seems to handle an Angular Universal case (cookieconsent.service.ts:134) but this still is not working on Angular 10.

My urgent quick fix was to define an empty function "initialize" in server.ts which is running Express server with "@nguniversal/express-engine" middleware. Maybe not perfect but it works and is a workaround to make my project work on production.

...

function setBrowserGlobals(distFolder) {
    const template = readFileSync(join(distFolder, 'index.html')).toString();
    const domino = require('domino');
    const win = domino.createWindow(template);

    global['window'] = win;
    global['document'] = win.document;
    global['Node'] = win.Node;
    global['navigator'] = win.navigator;
    global['Event'] = win.Event;
    global['Event']['prototype'] = win.Event.prototype;
    global['localStorage'] = localStorage;
    global['window']['gtag'] = function () {};
    global['window']['cookieconsent'] = { initialise: function () {
        console.warn('Cookie consent is not working on server side');
    } };
}

// The Express app is exported so that it can be used by serverless Functions.
export function app(): express.Express {
    const server = express();
    const distFolder = join(process.cwd(), 'dist/browser');
    const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index';

    setBrowserGlobals(distFolder);

   ...
}

Answer 3

For people who get this error but don't use Universal: This error is also displayed when you forgot to install CookieConsent (with file appropriate references in angular.json styles/scripts).