ngx-cookieconsent icon indicating copy to clipboard operation
ngx-cookieconsent copied to clipboard

[Bug] SSR - Cookie popup has not yet been instantiated. Cannot invoke {{methodName}}

Open exitlol opened this issue 2 years ago • 0 comments

Ngx-CookieConsent Version

2.2.3

CookieConsent Version

3.1.1

Angular CLI (or Nx CLI) Version

10.1.7

Node Version

14.15.0

OS Version

Windows 10

Expected Behaviour

Init Cookie popup -> delete default, add site related config -> reinit the popup.

Actual Behaviour

In SSR i get the following error:

ERROR Error: Cookie popup has not yet been instantiated. Cannot invoke destroy() at NgcCookieConsentService.checkPopupInstantiated (C:\PROJECTS\car sharing\frontend\dist\carsharing-frontend\server\main.js:256074:19) at NgcCookieConsentService.destroy (C:\PROJECTS\car sharing\frontend\dist\carsharing-frontend\server\main.js:256156:14) at SafeSubscriber._next (C:\PROJECTS\car sharing\frontend\dist\carsharing-frontend\server\main.js:151307:28) at SafeSubscriber.__tryOrUnsub (C:\PROJECTS\car sharing\frontend\dist\carsharing-frontend\server\main.js:61552:16) at SafeSubscriber.next (C:\PROJECTS\car sharing\frontend\dist\carsharing-frontend\server\main.js:61491:22) at Subscriber._next (C:\PROJECTS\car sharing\frontend\dist\carsharing-frontend\server\main.js:61441:26) at Subscriber.next (C:\PROJECTS\car sharing\frontend\dist\carsharing-frontend\server\main.js:61418:18) at Observable._subscribe (C:\PROJECTS\car sharing\frontend\dist\carsharing-frontend\server\main.js:261250:20) at Observable._trySubscribe (C:\PROJECTS\car sharing\frontend\dist\carsharing-frontend\server\main.js:125040:25) at Observable.subscribe (C:\PROJECTS\car sharing\frontend\dist\carsharing-frontend\server\main.js:125026:22)

Steps to reproduce the behaviour

Dev environment params:

`Angular CLI: 10.1.7 Node: 14.15.0
OS: win32 x64

Angular: 10.1.6 ... animations, common, compiler, compiler-cli, core, forms ... language-service, platform-browser, platform-browser-dynamic ... platform-server, router Ivy Workspace: Yes

Package Version

@angular-devkit/architect 0.1001.7 @angular-devkit/build-angular 0.1001.7 @angular-devkit/core 10.1.7 @angular-devkit/schematics 10.1.7 @angular/cdk 10.2.7 @angular/cli 10.1.7 @angular/localize 10.2.5 @angular/material 10.2.7 @nguniversal/builders 10.1.0 @nguniversal/express-engine 10.1.0 @schematics/angular 10.1.7 @schematics/update 0.1001.7 rxjs 6.6.7 typescript 4.0.8`

Have an SSR setup -> Add util service that handles cookie related stuff into root component -> init the consent dialog.

I call the init function by subbing to a BehaviorSubject and manually triggering said subject. Because as I read, the initalize$ subject would be triggered already if I sub to it in my Util.

  public initCookieConsentDialog(): void {
    this.translateService.get(['cookies.allowAll', 'cookies.allowRequired', 'cookies.message', 'cookies.policyLink']).subscribe(data => {
      const existingConfig = this.cCService.getConfig();
      const newConfig = {
        ...existingConfig,
        content: {
          allow: data['cookies.allowAll'],
          deny: data['cookies.allowRequired'],
          message: data['cookies.message'],
          link: data['cookies.policyLink'],
        },
        cookie: {
          domain: this.document.location.href
        },
      } as NgcCookieConsentConfig
      this.cCService.destroy();
      this.cCService.init(newConfig);
    });
  }

I call destroy here since with the app.module import and by injecting the lib service into my util constructor the popup should be initialized. However. It says what's in the error above.

What should be my optimal workaround, so it's working in dev and in SSR(deployed) state?

exitlol avatar Mar 31 '22 06:03 exitlol