ngx-cookieconsent : Cannot find name 'NgcInitializeEvent' and 'NgcStatusChangeEvent'

Question

I would like to use ngx-cookie consent package in my angular 4 application(built with angular cli) . I do not have a systemjs file. Hence except that part , I followed each step as in the documentation ( https://tinesoft.github.io/ngx-cookieconsent/doc/index.html). I am having 4 error messages

1. two errors with following message

   //Cannot read property 'initialise' of undefined at 
   //NgcCookieConsentService.init (cookieconsent.service.js:53)
   //at new NgcCookieConsentService (cookieconsent.service.js:23)
   //at _createClass (core.es5.js:9532)
   //at createProviderInstance$1 (core.es5.js:9500)
   //at resolveNgModuleDep (core.es5.js:948 5) 
   //at NgModuleRef.get (core.es5.js:10577)
   //at resolveDep (core.es5.js:11080)
   //at createClass (core.es5.js:10933)
   //at createDirectiveInstance (core.es5.js:10764)
   //at createViewNodes (core.es5.js:12212)
   

   2. Cannot find name 'NgcInitializeEvent'. Cannot find name 'NgcStatusChangeEvent'.

Please help.

Answer 1

I'm the author of ngx-cookieconsent. I have already answered the issues on the project's issues tracker, but for future googlers, here they are:

1. 'NgcInitializeEvent' and 'NgcStatusChangeEvent' not found

You need to import them, if you want to use these events in your code:

import { NgcInitializeEvent, NgcStatusChangeEvent } from 'ngx-cookieconsent';

2. Cookie status not persisted

your need to set 'cookie.domain' parameter of configuration object (even in localhost), for cookies to be set properly:

import {NgcCookieConsentModule, NgcCookieConsentConfig} from 'ngx-cookieconsent';

const cookieConfig:NgcCookieConsentConfig = {
  cookie: {
    domain: 'localhost' // or 'your.domain.com' // it is mandatory to set a domain (even in localhost), for cookies to work properly
  }
};

@NgModule({
  declarations: [AppComponent, ...],
  imports: [NgcCookieConsentModule.forRoot(cookieConfig), ...],  
  bootstrap: [AppComponent]
})
export class AppModule {
}

Note: if you are using Angular CLI for your consuming app, you can take advantage of environments to control the domain based on your running environment:

environments/environment.ts: (dev)

export const environment = {
  production: false,
  cookieDomain: 'localhost' // -<< must be 'localhost'
};

environments/environment.prod.ts: (prod)

export const environment = {
  production: true,
  cookieDomain: 'your.domain.com' // -<< must be the domain of deployed app
};

and use it as such:

import {NgcCookieConsentModule, NgcCookieConsentConfig} from 'ngx-cookieconsent';
import { environment } from './../environments/environment';

const cookieConfig:NgcCookieConsentConfig = {
  cookie: {
    domain: environment.cookieDomain // -<< domain will change base on your running env
  }
};

@NgModule({
  declarations: [AppComponent, ...],
  imports: [NgcCookieConsentModule.forRoot(cookieConfig), ...],  
  bootstrap: [AppComponent]
})
export class AppModule {
}

Answer 2

I had the same problem. It solved by adding the min.js and min.css to angular.json file. See: https://github.com/tinesoft/ngx-cookieconsent