Cookie undefined in service | cookie value exist in component | angular

Question

api.service.ts

import { Injectable, Inject } from '@angular/core';
import { Http, Headers } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/throw';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/timeout';
import 'rxjs/add/operator/retry';

import { CacheService  } from './cache.service';
import { AuthService } from '../services/auth.service';
import { CookieService } from 'angular2-cookie/core';

@Injectable()
export class ApiService {
    constructor(
        public _http: Http, 
        private _auth: AuthService,
        private _cookie: CookieService,
        @Inject('isBrowser') public isBrowser: boolean
        ) {}

        get(){
          console.log(this._cookie.get('Token'));//undefined
        }
    }

controller.component.ts

import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { ApiService } from './api.service';
import { ReviewComponent } from '../shared/+review/review.component';
import { CookieService } from 'angular2-cookie/core';
// import { ModelService } from '../shared/model/model.service';

@Component({
    selector: 'mall',
    templateUrl: './mall.component.html',
    styleUrls:['./mall.component.css'],
    providers: [ ApiService, CookieService ]
})
export class MallComponent implements OnInit {

    constructor(private _api: ApiService, private route: ActivatedRoute, private _cookie: CookieService) {}

    ngOnInit(){
        this._cookie.get('Token');// Token => value
        this._api.get(); //Token => undefined
    }
}

I don't understand this behavior. The cookie exist when i access in controller directly but is undefined when i access through service.

Is there any way to access cookie through services?

using https://github.com/salemdar/angular2-cookie with angular universal.

@Neel u even checked any of the link provided in the question? Please study the question first...understand the problem and make sure to reply with a reasonable statement. — Scien Ce Subject, Apr 23 '17 at 04:03
Why doesn't `ApiService.get` return a value. That doesn't make sense. — Aluan Haddad, Apr 23 '17 at 11:21
@AluanHaddad i know that's why I asked the question. Otherwise there wasn't any need of this question... — Scien Ce Subject, Apr 25 '17 at 07:51

score 0 · Answer 1 · answered Apr 25 '17 at 12:14

0

Maybe this?

ngOnInit(){
  this._cookie.put('Token', WHATEVER_TOKEN_IS);// Token => value
  console.log(this._api.get('Token')); //Token => undefined
}

and then

api-service

export class ApiService {
  constructor(
    readonly _http: Http, 
    private _auth: AuthService,
    private _cookie: CookieService,
    @Inject('isBrowser') public isBrowser: boolean
    ) {}

    get() {
      const token = this._cookie.get('Token');
      console.log(token);
      return token;
    }
}

answered Apr 25 '17 at 12:14

Aluan Haddad

29,886
8
72
84

I don't know what u have been smoking but the problem isn't about storing the cookie...the problem is why api call isn't returning the cookie with value while the component call is returning the value... Or is it supposed to be like this... If it is so..why ? and if it isn't then why there is irregularity... – Scien Ce Subject Apr 26 '17 at 07:38
1

Firstly, take it easy. Secondly, if you don't want answers like this you should refine your question so that the code makes at least vague sense. The code in your ngOnInit method doesn't make any sense. – Aluan Haddad Apr 26 '17 at 08:14
and its understandable if a function is returning a value then value exist. I just simplified the code and provided with just the get code becoz the problem exist there. And your answer is just telling me to store value. Really what have u been smoking? If 2 function is being called 1 after the other..why would 1 of them wont return value. The order doesn't matter coz i tried calling the 2nd function 1st but the response is still same..function from service isn't returning value. – Scien Ce Subject Apr 26 '17 at 09:13

score 0 · Answer 2 · answered Oct 27 '20 at 19:38

0

This might be late, but I went through the same problem. I was not defining the base path as "/". So what was happening is that the cookie was being set for the default path where I was. Eg. I was at site.com/auth/ Cookie would get saved at path "/auth" If I save a cookie like

this.cookieService.set('token', token, null, "/");

then problem is solved. Hope this helps further devs.

answered Oct 27 '20 at 19:38

Mike

421
5
16

The issue was of providers. I have posted the answer – Scien Ce Subject Oct 29 '20 at 06:38

score 0 · Accepted Answer · answered Oct 29 '20 at 06:38

It was my mistake to add CookieService in component providers which initiate a new instance of service which was causing the issue.

@Component({
    selector: 'mall',
    templateUrl: './mall.component.html',
    styleUrls:['./mall.component.css'],
    providers: [ ApiService, CookieService ] //<--- here
})

CookieService should only be imported into AppComponent(root) to make a single instance available to other components.

Cookie undefined in service | cookie value exist in component | angular

3 Answers3

Linked