Manage your cookies in both of yours Angular applications – server-side and browser
// TODO deploy and specify examples urls
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
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
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 { }
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
})
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 bykey
; -
getObject(key: string): { [key: string]: string } | string
get object value from cookies bykey
; -
getAll(): { [key: string]: string }
get all cookies ; -
remove(key: string, options?: CookiesOptions): void
remove cookie bykey
; -
removeAll(): void
remove all cookies;
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());
}
}
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},
]
});
});
// ...
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 { }
- [x] ng packager schema
- [] spec.test
- [] e2e test ??
- examples
The MIT License (MIT)