Cannot set property 'onPopupOpen' of null

[MDzyga]

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 but in my opinion it doesn't matter

Angular, Node and al Versions?

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/

Angular CLI: 9.0.7
Node: 12.6.0
OS: win32 x64

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

Package Version

@angular-devkit/architect 0.900.7
@angular-devkit/build-angular 0.900.7
@angular-devkit/build-optimizer 0.900.7
@angular-devkit/build-webpack 0.900.7
@angular-devkit/core 9.0.7
@angular-devkit/schematics 9.0.7
@angular/cdk 9.1.3
@angular/material 9.1.3
@angular/pwa 0.900.7
@ngtools/webpack 9.0.7
@schematics/angular 9.0.7
@schematics/update 0.900.7
rxjs 6.5.4
typescript 3.7.5
webpack 4.41.2

Repro steps

I have to show cookie information when user is logged in and doesn't approve NDA Terms.

AppModule

@NgModule({
  imports: [
    NgProgressModule,
    BrowserAnimationsModule,
    BrowserModule,
    AuthModule,
    CoreModule,
    SharedModule,
    ModuleRouting,
    ServiceWorkerModule.register('/ngsw-worker.js', { enabled: environment.production }),
    NgcCookieConsentModule.forRoot(null),
  ],
  declarations: [
    AppComponent,
    ToolbarComponent,
  ],
  bootstrap: [
    AppComponent,
  ],
})
export class AppModule { }

Note: I have to set null as config because in other way Cookie information is shown.

Next in toolbar component I have a function which show cookies information.

ToolbarComponent

this.ccService.initialize$
      .pipe(untilDestroyed(this))
      .subscribe(() => {
        this.visibleCookies = true;
      });

    this.ccService.init(this.getCookieConfig());

    this.ccService.statusChange$
      .pipe(untilDestroyed(this))
      .subscribe((event: NgcStatusChangeEvent) => {
        if (event.status === 'allow') {
          this.currentUserService.setApprovedCookies()
            .pipe(untilDestroyed(this))
            .subscribe();
        }
      });

The log given by the failure

core.js:6185 ERROR TypeError: Cannot set property 'onPopupOpen' of null
    at NgcCookieConsentService.init (ngx-cookieconsent.js:119)
    at new NgcCookieConsentService (ngx-cookieconsent.js:97)
    at Object.NgcCookieConsentService_Factory [as factory] (ngx-cookieconsent.js:234)
    at R3Injector.hydrate (core.js:16865)
    at R3Injector.get (core.js:16617)
    at NgModuleRef$1.get (core.js:36027)
    at Object.get (core.js:33779)
    at getOrCreateInjectable (core.js:5805)
    at ɵɵdirectiveInject (core.js:20861)
    at NodeInjectorFactory.ToolbarComponent_Factory

Desired functionality

I would like to import NgcCookieConsentModule without config and be able to show cookies information when I need.

[MDzyga]

If I define empty config then an application displays 2 cookies information.

this cookies banner shouldn't be visible on this page

[tinesoft]

Hi @MDzyga

• The NgcCookieConsentModule.forRoot() is not expecting (nor should not be given) a null config object.
  Note this is just the configuration part, in order to use the module later in your project.
  The actual initialisation/display of the cookie banner is not happening here,
  but instead as soon as the NgcCookiconsentService gets instantiated/injected into your component (via its constructor)
  or upon explicit call to NgcCookiconsentService.init(config) method.

• Passing an empty empty config object, no longer produces the Cannot set property 'onXXX' errors,
  because those callbacks can now be set on the configuration object during initialization of the NgcCookiconsentService
  (in other to later provide the xxx$ observable events you subscribe to)

So you must inject the NgcCookiconsentService in the main component that is rendered AFTER the successful login.
I don't know if that is the case for your ToolbarComponent...

PS: (not directly related to this issue) From your screenshot, it seems that the style for cookieconsent bar is not loaded...
Make sure to either:

• List it in your angular.json's styles sections:

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

• or import it in the src/styles.EXT file:

/* You can add global styles to this file, and also import other style files */
@import '~cookieconsent/build/cookieconsent.min';

[MDzyga]

thanks for explanation, it works :)

[ihor-lev]

Maybe this comment will be useful for someone.

In my case, I was able to catch the same error with the wrong import of my cookieConsentConfig. I placed it in a separate file cookie-config.ts:

const cookieConfig: NgcCookieConsentConfig = {...}

export default cookieConfig;

and imported it to app.module.ts with: import cookieConfig from './cookie-config'

It worked fine in development but failed at production build with the same error.

So I had to use a different export and import:

export const cookieConfig: NgcCookieConsentConfig = {...} 

import { cookieConfig } from './cookie-config';

It seems dummy but this is an experience as well.