[Feature] Angular 14

[Hartaxfr]

Is your feature request related to a problem? Please describe

nothing

Describe the idea you'd like

Is an angular 14 migration already planned ? Or is it ready to use it with angular 14 ?

Describe alternatives you've considered

nothing

Additional context

nothing

[iSeremet-Reloadly]

same issue here, it's not showing up in angular 14

[MrTob]

same here

[tinesoft]

Hi guys,

Thanks for the interest in the library.
Support for Angular 14 and other goodies are coming up soon!
Stay tuned ;-)

[MrTob]

any news?

[Noppey]

Hi, we require support for angular 14 as well, this now prevents us from upgrading our application. Or we have to use a different cookie consent solution, which would be a shame since it worked perfectly so far :-)

[erwindemoel]

@tinesoft Hi, we would also like to use this feature and are really happy with the cookiebar. We don't want to use another cookiebar component. When will this be upgraded to Angular 14?

[Noppey]

Do you have an ETA perhaps? We need to fix our cookie bar this week, otherwise we need to install another library.

[iSeremet-Reloadly]

I have fixed that by switching to cookieconsent library

app.module.ts

let cc = window as any;
cc.cookieconsent.initialise({
    cookie: {
        domain: window.location.hostname
    },
    position: "bottom",
    theme: "classic",
    palette: {
        popup: {
            background: "#00163a",
            text: "#ffffff",
            link: "#ffffff"
        },
        button: {
            background: "#7700FF",
            text: "#ffffff",
            border: "transparent"
        }
    },
    type: "info",
    content: {
        message: "We are using cookies to ensure you get the best experience on our website.",
        dismiss: "Got it!",
        deny: "Decline",
        link: "Learn more",
        href: "https://www.example.com/cookie-policy",
        policy: "Cookie Policy",
        header: "Cookies used on the website!",
        allow: "Allow cookies"
    }
}); 

[tinesoft]

Hi again everyone,

Sorry for the delay...

I'm sure y'all understand, finding the right balance between my fulltime job (not OSS unfortunately :-( ), maintaining my OSS projects, and other life stuff, is not always easy...

That being said, I feel the strong need for Angular 14 support. So I will start working on it this weekend.
(I will probably delay the other minor features I originally wanted to chip in )
Based on how I progress, I will release a new version either at the end of this week, or in the next one.

Please bear with me, and thanks for you understanding and support 🙏🏾

[tinesoft]

Hi folks,

Thanks for your patience. As promised, I've just released v4.0.0 of the library with Angular 14 support!

EDIT:

There are no actual breaking changes in this version , in terms of API or anything, just the Angular version bump.
Look for v3.0.0 release notes instead for actual breaking changes (I pushed that version first, for people still on Angular 12 to 13)

PS: a minor v3.1.0 was accidentally published with Ng14 support, please ignore it, and go to v4.0.0 directly

[github-actions]

🎉 This issue has been resolved in version 4.0.0 🎉

The release is available on:

• GitHub release
• npm package (@latest dist-tag)

Your semantic-release bot 📦🚀

[Noppey]

I'm still getting the same bug unfortunately:

[erwindemoel]

@tinesoft Same here unfortunately :-/ When can we expect an update on this?

[erwindemoel]

@tinesoft We would like to launch our website, but this blocking issue is stopping us from doing so. Do you have an ETA on when this issue will be fixed?

[tinesoft]

Hi guys, sorry I somehow wasn't notified of the message after having closed the issue....

@Noppey, @erwindemoel can you elaborate on what bug you are having ?
Support for angular v14 was added a few days back, in v4.0.0 of this library....

[erwindemoel]

Here is a screenshot, which has also been shared earlier by Noppey:

It only shows half of the cookie bar.

[tinesoft]

@erwindemoel I will need more info than just that screenshot ^^

I tested the library with my demo application (running ng14) and it is working fine.

• can you share relevant part of your angular.json config ?
• what error do you have in the console (if any) ?
• what exact version of you Angular, NPM, Yarn, Node ( ng version, yarn --version, npm version, node --version) ?
• ideally a minimalistic repro project on https://stackblitz.com
• any other relevant info

[erwindemoel]

• angular.json:

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

• No error in console
• Angular version:
  Package Version

---

@angular-devkit/architect 0.1402.5
@angular-devkit/build-angular 14.2.5
@angular-devkit/core 14.2.5
@angular-devkit/schematics 14.2.5
@angular/cdk 14.2.4
@angular/material 14.2.4
@schematics/angular 14.2.5
rxjs 7.5.7
typescript 4.8.4

• npm version:
  {
  'profun-ng': '0.0.0',
  npm: '8.19.2',
  node: '16.10.0',
  v8: '9.3.345.19-node.14',
  uv: '1.42.0',
  zlib: '1.2.11',
  brotli: '1.0.9',
  ares: '1.17.2',
  modules: '93',
  nghttp2: '1.45.1',
  napi: '8',
  llhttp: '6.0.2',
  openssl: '1.1.1l',
  cldr: '39.0',
  icu: '69.1',
  tz: '2021a',
  unicode: '13.0'
  }
• Node version:
  v16.10.0

The problem seems to occur when we translate the text in app.component.ts. When I comment out the call to updateCookieLanguage, it works normally.

ngOnInit(): void {
        this.translocoService.langChanges$
            .pipe(takeUntil(this.unsubscribeAll))
            .subscribe(() => {
                this.updateCookieLanguage();
            });

        this.updateCookieLanguage();
}

updateCookieLanguage() {
        this.translocoService
            .selectTranslate(['SENTENCES.COOKIESUSEDONWEBSITE', 'SENTENCES.COOKIESUSEDONWEBSITEDESCRIPTION', 'WORDS.GOTIT', 'WORDS.ALLOWCOOKIES', 'WORDS.REFUSECOOKIES', 'WORDS.LEARNMORE', 'WORDS.COOKIEPOLICY'])
            .subscribe(data => {
                this.ccService.getConfig().content = this.ccService.getConfig().content || {};
                // Override default messages with the translated ones
                this.ccService.getConfig().content.header = data['SENTENCES.COOKIESUSEDONWEBSITE'];
                this.ccService.getConfig().content.message = data['SENTENCES.COOKIESUSEDONWEBSITEDESCRIPTION'];
                this.ccService.getConfig().content.dismiss = data['WORDS.GOTIT'];
                this.ccService.getConfig().content.allow = data['WORDS.ALLOWCOOKIES'];
                this.ccService.getConfig().content.deny = data['WORDS.REFUSECOOKIES'];
                this.ccService.getConfig().content.link = data['WORDS.LEARNMORE'];
                this.ccService.getConfig().content.policy = data['WORDS.COOKIEPOLICY'];

                this.ccService.destroy();//remove previous cookie bar (with default messages)
                this.ccService.init(this.ccService.getConfig()); // update config with translated messages
            });
    }

Does that help you to reproduce the issue?

[tinesoft]

Hi

It looks like a problem in your code i'm afraid.... nothing to do with the library itself, nor with Angular 14 support.

Maybe you call that updateCookieLanguage() too soon? before the libray has initialised properly ?

In the documentation and demo app, i used @ngx-translate ( which is similar to ng-transloco), and it works fine...

[erwindemoel]

We have resolved the issue

[tinesoft]

@erwindemoel Glad to hear that!

For completeness, and in case it might help others, can you elaborate on how you solved the issue and what it was?

Thanks

[erwindemoel]

We used this.translocoService.selectTranslate to translate different messages at once. This worked differently with ngx-translate and our newly implemented translocoService. That broke the cookiebar.