Cookie.deleteAll() not working

[tauil]

Hi,

I'm having a issue with Cookie.deleteAll();. It's not cleaning my cookie. Anyont with the same issue?

My component:

import { Cookie } from 'ng2-cookies/ng2-cookies';

...

@Injectable()
export class CookieService {
  ...
    signOut():boolean {
        Cookie.deleteAll();
        return true;
    }
}

[Till86]

My delete seems not to work on IE11 somehow

[Till86]

seems like it's not only for IE but for Chrome, too. Sadly only seems totally random. Something happens that kind of locks the cookie and from then on, it can't be overwritten anymore. Only clearing the browsers cookies helps for me.

[tauil]

Yeah. I fixed this issue with this:

            let date = new Date();
            let days:number = -1;
            date.setTime(date.getTime()+(days*24*60*60*1000));
            Cookie.set('my_key', '', date['toGMTString']());

Also, I've put this inside an Observable and return true after a setTimeout of 1000ms. This fixed my issue because I think that Cookie IO has a short delay.

[Bigous]

That's what Cookie.delete does!

You can set the time to expire as a number too... like -1 for 1 day ago.

Cookie.set('my_key', '', -1);

[]'s

[tauil]

Yes! I tried Using Cookie.delete but somehow it didn't work. I'll try again.

[tauil]

Just tested now. And it doesn't work in Chrome Version 54.0.2840.98 (64-bit) in MacOS.

I guess the -1 argument is the problem.

According to my tests:

Don't work:

Cookie.set('my_key', '', -1);

This works:

let date = new Date();
let days:number = -1;
date.setTime(date.getTime()+(days*24*60*60*1000));
Cookie.set('my_key', '', date['toGMTString']());

date['toGMTString']() === Wed, 14 Dec 2016 19:25:20 GMT

[tauil]

The weird thing is that the code really should work, but somehow, it's not.

[tauil]

The behaviour is: Cookie.deleteAll() doesn't deletes the keys but somehow it freezes it in a way that I can't delete anymore, only through inspector/cookies. I thought the path and domain were related, but it seems that it's not.

[Bigous]

Hi @tauil Tks for your effort to make this library better!

I'm not able to reproduce the problem here (windows 10 with chrome 55).

I've started a new project with angular-cli:

npm install -g angular-cli
ng new ng2-cookies-test
cd ng2-cookies-test
npm install --save ng2-cookies
code .
ng serve

And edited the app.component.html to be like this:

<h1>
  {{title}}
</h1>

<table>
  <thead>
    <tr>
      <td colspan="2">Cookies:</td>
    </tr>
    <tr>
      <th>Name</th>
      <th>Value</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let cookie of keys">
      <td>{{cookie}}</td>
      <td>{{cookies[cookie]}}</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>
        Name:
        <input type="text" [(ngModel)]="cName">
      </td>
      <td>
        Value:
        <input type="text" [(ngModel)]="cValue">
        <input type="button" value="Add" (click)="addCookie(cName, cValue)">
      </td>
    </tr>
    <tr>
      <td>
        <input type="text" [(ngModel)]="rName">
        <input type="button" value="Remove" (click)="removeCookie(rName)">
      </td>
      <td>
        <input type="button" value="Remove All" (click)="removeAll()">
      </td>
    </tr>
  </tfoot>
</table>

And the app.component.ts to be like that:

import { Component } from '@angular/core';
import { Cookie } from 'ng2-cookies';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';
  cookies: Object;
  keys: Array<string>;
  cName: string;
  cValue: string;
  rName: string;

  constructor() {
    this.update();
    console.log(this.cookies);
  }
  update() {
    this.cookies = Cookie.getAll();
    this.keys = Object.keys(this.cookies);
  }
  addCookie(cName: string, cValue: string) {
    console.log('Adding: ', cName, cValue);
    Cookie.set(cName, cValue);
    this.update();
  }
  removeCookie(rName: string) {
    console.log('Removing: ', rName);
    Cookie.delete(rName);
    this.update();
  }
  removeAll() {
    console.log('Removing all cookies');
    Cookie.deleteAll();
    this.update();
  }
}

And when I open the browser at http://localhost:4200, I can see all the cookies, add new cookies delete individual cookie and delete all with no problem.

One problem that you may have is if you are setting your cookie with the domain and trying to delete it without the domain... but with this simple example, everything is working.

[tauil]

Ok! I'll take a look at this test soon!

[Bigous]

Ok, closing due to the lack of activity.

[tauil]

Sorry @Bigous . I have no time recently to test it again. I plan to do it soon and then I post you back. Thanks for the help anyway!

[Bigous]

No problem @tauil , That's all right. Just closed to stay with issues that we need to do an action. If this problem return, I'll reopen the issue!

[thatsmeamal]

@Bigous, I am having the same issue with Cookie.deleteAll() method. It seems to be working fine now and then. But, the cookies are not cleared when the method is called, after refreshing the page. Do you have any idea why this happen ?

[Bigous]

Hi @thatsmeamal , could you try with the minimal example that I put in this issue ?

So we have a common base code for testing - and what browser/version are you using for test?

[thatsmeamal]

It is working fine in the example mentioned @Bigous. I think I may have loaded a different module: import { Cookie } from 'ng2-cookies/ng2-cookies'; Could that have been the problem ?

[Bigous]

I'm not sure, but angular 2 recommends the way it's in the example... can be... in fact ng2-cookies/ng2-cookies should not work, because the file generated is index.js not ng2-cookies.js ... :D

[thatsmeamal]

Thanks @Bigous. I will try with the import module you'd mentioned.

[balfons]

import { Cookie } from 'ng2-cookies/ng2-cookies' is the reason Cookie.deleteAll() won't work. Use import { Cookie } from 'ng2-cookies' instead.

[ghost]

@balfons Thank you, Your answer solved my problem. should I also set the cookie by import { Cookie } from 'ng2-cookies' because while setting the cookie import { Cookie } from 'ng2-cookies/ng2-cookies' is working

[balfons]

@PatilSuraj No problem! Yes, you should always use import { Cookie } from 'ng2-cookies'.

[aakashchan]

Does Cookie.deleteAll() work in older firefox versions?

[Bigous]

Hi @chan24

Depends. How old?

[bobby-091]

I am using ng2-Cookie for storing token value and using this cookie in different angular components by importing it. When clicking on logout button (logout method placed in navbar component) from anywhere (different states like home, account, managers components) in the application it's redirecting to the login page(login component) in Chrome and Firefox (working fine) browsers. But it's not working properly in IE browser. In IE, if logout event fired from home page (homecomponent.ts file, starting of the application after immediate login) then only application is logging out. And when clearing the cookies of the browser application is redirecting to the login page in Firefox and Chrome browsers but not working as expected in IE browser. Below is the code I am using

navbar.component.ts Logout() { Cookie.deleteAll(); this._router.navigate(['/login']); }

login.component.ts ngOnInit() { let token = Cookie.get('auth_token'); if (token != null && token != undefined && !this._roleauth.isTokenExpired(token)) { this._router.navigate(['/home']); } }

Is it the behavior of ng2-cookie in IE browser? or am I doing in wrong way? Can anyone please help me with this.

[Bigous]

Hi @bobby-091 , IE or EDGE? if IE, what version?

Cookies could be used for that. The problem is that IE is not a browser that follows the standards.

You are using the library correctly, the problem may be with your IE version. I know Wondows 10 Fall creator update has changed how cookies are stored, but I don't know if they changed the way they work.

Another source to look for is this MSDN blog. As you can see, lots of things are weird in IE.