search

tinesoft / ngx-cookieconsent

Cookie :cookie: Consent module for Angular.
https://tinesoft.github.io/ngx-cookieconsent/
MIT License
164 stars 35 forks source link

[Feature] Angular 14 #123

Closed Hartaxfr closed 2 years ago

Hartaxfr commented 2 years ago

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 commented 2 years ago

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

MrTob commented 2 years ago

same here

tinesoft commented 2 years ago

Hi guys,

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

MrTob commented 2 years ago

any news?

Noppey commented 2 years ago

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 commented 2 years ago

@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 commented 2 years ago

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

iSeremet-Reloadly commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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[bot] commented 2 years ago

:tada: This issue has been resolved in version 4.0.0 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

Noppey commented 2 years ago

I'm still getting the same bug unfortunately:

image

erwindemoel commented 2 years ago

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

erwindemoel commented 2 years ago

@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 commented 2 years ago

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 commented 2 years ago

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

image

It only shows half of the cookie bar.

tinesoft commented 2 years ago

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

erwindemoel commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

We have resolved the issue

tinesoft commented 2 years ago

@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 commented 2 years ago

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.