ngx-cookie-universal

Manage your cookies in both of yours Angular applications – server-side and browser

// TODO deploy and specify examples urls

Table of contents:

• Prerequisites
• Getting started
  • Installation
  • browser.module.ts
  • server.module.ts
  • Cookies options
• API
• Example of usage
• License

Prerequisites

This package has peer dependency on @angular ^v11.0.0.
If you need to use cookies with server you also have to install cookie-parser

Getting started

Installation

Add ngx-cookie-universal with Angular CLI:

ng add ngx-cookie-universal

Or install with npm:

npm install ngx-cookie-universal --save

Install cookie-parser if you need server-side support:

npm install cookie-parser --save

browser.module.ts

Add BrowserCookiesModule to your browser module:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserCookiesModule } from 'ngx-cookie-universal';
...
import { AppModule } from './app/app.module';
import { AppComponent } from './app/app.component';
...

@NgModule({
  imports: [
    AppModule,
    BrowserCookiesModule.forRoot(),
    ...

    // if using Angular Universal
    BrowserModule.withServerTransition({appId: 'your-app-id'}),
    ...
  ],
  bootstrap: [AppComponent]
})
export class BrowserAppModule { }

Cookies options

You can preset cookies options:

BrowserCookiesModule.forRoot({
  path: '/',
  domain: 'your.domain',
  expires: '01.01.2020',
  secure: true,
  httpOnly: true
})

// Angular universal
...
ServerCookiesModule.forRoot({
  path: '/',
  domain: 'your.domain',
  expires: '01.01.2020',
  secure: true,
  httpOnly: true
})

API

CookieService has following methods:

• put(key: string, value: string, options?: CookiesOptions): void put some value to cookies;
• putObject(key: string, value: Object, options?: CookiesOptions): void put object value to cookies;
• get(key: string): string get some value from cookies by key;
• getObject(key: string): { [key: string]: string } | string get object value from cookies by key;
• getAll(): { [key: string]: string } get all cookies ;
• remove(key: string, options?: CookiesOptions): void remove cookie by key;
• removeAll(): void remove all cookies;

Example of usage

Just import CookiesService from ngx-cookie-universal and use it:

import { Component, OnInit } from "@angular/core";
import { CookiesService } from "ngx-cookie-universal";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"]
})
export class AppComponent implements OnInit {

  constructor(private cookieService: CookiesService) {}

  ngOnInit() {
    this.cookieService.put("test_cookie", "value_of_test_cookie");
    this.cookieService.put("http_only_cookie", "value_of_http_only_cookie", {
      httpOnly: true
    });
    console.log(this.cookieService.get("some_cookie"), " => some_cookie");
    console.log(this.cookieService.get("http_only_cookie"), " => undefined");
    console.log(this.cookieService.getAll());
  }
}

Angular Universal prerequisites

If you're using @nguniversal/express-engine as server then add following imports to your server.ts:

import { renderModuleFactory } from "@angular/platform-server";
import { provideModuleMap } from "@nguniversal/module-map-ngfactory-loader";
import * as cookieParser from "cookie-parser";

Below, find your app.run callback:

// ...
app.use(cookieParser("YOUR_PRIVATE_TOKEN"));


// All regular routes use the Universal engine
server.get('*', (req, res) => {
    res.render(indexHtml, {
        req,
        providers: [
            {provide: APP_BASE_HREF, useValue: req.baseUrl},
            {provide: 'REQUEST', useValue: req},
            {provide: 'RESPONSE', useValue: res},
        ]
    });
});
// ...

server.module.ts

Add ServerCookiesModule to your server module:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ServerModule } from '@angular/platform-server';
import { ServerCookiesModule } from 'ngx-cookie-universal';
...
import { AppModule } from './app/app.module';
import { AppComponent } from './app/app.component';
...

@NgModule({
  imports: [
    ServerModule,
    ServerCookiesModule.forRoot(),
    AppModule,
    ...
  ],
  bootstrap: [AppComponent]
})
export class ServerAppModule { }

Roadmap

• [x] ng packager schema
• [] spec.test
• [] e2e test ??
• examples

License

The MIT License (MIT)