angular2-cookie DEPRECATED => ngx-cookie 
This library is deprecated and please use ngx-cookie instead.
Implementation of Angular 1.x $cookies service to Angular 2 v1.2.6
Please use >=1.2.4 for Angular >2.0.0, 1.1.x versions for beta, 1.2.2 version is for release candidates earlier than rc.5 and 1.2.3 is for >rc.5.
You can install this package locally with npm.
# To get the latest stable version and update package.json file:
npm install angular2-cookie --saveAfter installing the library, it should be included in the SystemJS configurations.
/**
* System configuration for Angular 2 samples
* Adjust as necessary for your application needs.
* Taken from: https://github.com/angular/quickstart/blob/master/systemjs.config.js
*/
(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'app',
// angular bundles
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
'angular2-cookie': 'npm:angular2-cookie'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
},
'angular2-in-memory-web-api': {
main: './index.js',
defaultExtension: 'js'
},
'angular2-cookie': {
main: './core.js',
defaultExtension: 'js'
}
}
});
})(this);CookieService class is an injectable service with angular @Injectable() decorator. Therefore, it needs to be registered in the providers array (encouraged way).
Then, it will be available in the constructor of the component class.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CookieService } from 'angular2-cookie/services/cookies.service';
import { AppComponent } from './app.component';
@NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent ],
providers: [ CookieService ],
bootstrap: [ AppComponent ]
})
export class AppModule { }import {Component} from 'angular2/core';
import {CookieService} from 'angular2-cookie/core';
@Component({
selector: 'my-very-cool-app',
template: '<h1>My Angular2 App with Cookies</h1>'
})
export class AppComponent {
constructor(private _cookieService:CookieService){}
getCookie(key: string){
return this._cookieService.get(key);
}
}This module supports angular universal through angular service overrides, make sure you add something like the following to your backend module instead of adding the CookieService provider
import { NgModule } from '@angular/core';
import { UniversalModule } from 'angular2-universal';
import { CookieService } from 'angular2-cookie/services/cookies.service';
import { CookieBackendService } from 'angular2-cookie/services/cookies.backend.service';
import { AppComponent } from './app.component';
@NgModule({
imports: [ UniversalModule ],
declarations: [ AppComponent ],
providers: [
{
provide: CookieService,
useClass: CookieBackendService
}
],
bootstrap: [ AppComponent ]
})
export class AppModule { }Here you can find some usage examples with popular boilerplate libraries.
A boilerplate provided by Angular team. (Link: https://github.com/angular/quickstart)
Just edit the systemjs.config.js file and add the angular2-cookie there.
/**
* System configuration for Angular 2 samples
* Adjust as necessary for your application needs.
*/
(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'app',
// angular bundles
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
'angular2-cookie': 'npm:angular2-cookie'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
},
'angular2-in-memory-web-api': {
main: './index.js',
defaultExtension: 'js'
},
'angular2-cookie': {
main: './core.js',
defaultExtension: 'js'
}
}
});
})(this);A popular seed project. (Link: https://github.com/mgechev/angular2-seed)
Add the following settings to the (constructor of) ProjectConfig class (path: ./tools/config/project.config.ts).
/* Add to or override NPM module configurations: */
//this.mergeObject( this.PLUGIN_CONFIGS['browser-sync'], { ghostMode: false } );
this.mergeObject(this.SYSTEM_CONFIG_DEV['paths'], {'angular2-cookie': 'node_modules/angular2-cookie/bundles/angular2-cookie.js'});
this.mergeObject(this.SYSTEM_BUILDER_CONFIG['packages'], {
'angular2-cookie': {
main: 'core.js',
defaultExtension: 'js'
}
});Do not forget to inject the service in the module (providers array).
A CLI tool for Angular2. (Link: https://github.com/angular/angular-cli)
Edit the vendorNpmFiles array (path: ./angular-cli-build.js).
// Angular-CLI build configuration
// This file lists all the node_modules files that will be used in a build
// Also see https://github.com/angular/angular-cli/wiki/3rd-party-libs
/* global require, module */
var Angular2App = require('angular-cli/lib/broccoli/angular2-app');
module.exports = function(defaults) {
return new Angular2App(defaults, {
vendorNpmFiles: [
'systemjs/dist/system-polyfills.js',
'systemjs/dist/system.src.js',
'zone.js/dist/**/*.+(js|js.map)',
'es6-shim/es6-shim.js',
'reflect-metadata/**/*.+(ts|js|js.map)',
'rxjs/**/*.+(js|js.map)',
'@angular/**/*.+(js|js.map)',
'angular2-cookie/**/*.+(js|js.map)'
]
});
};Also add angular2-cookie to the map and packages object in the system-config.ts (path: ./src/system-config.ts)
/***********************************************************************************************
* User Configuration.
**********************************************************************************************/
/** Map relative paths to URLs. */
const map: any = {
'angular2-cookie': 'vendor/angular2-cookie'
};
/** User packages configuration. */
const packages: any = {
'angular2-cookie': {main: 'core.js', defaultExtension: 'js'},
};An Angular 2 Starter kit featuring Angular 2 and Webpack 2 by @AngularClass (Link: https://github.com/AngularClass/angular2-webpack-starter)
Add angular2-cookie to vendor.browser.ts (path: ./src/vendor.browser.ts)
// Angular 2
import '@angular/platform-browser';
import '@angular/platform-browser-dynamic';
import '@angular/core';
import '@angular/common';
import '@angular/forms';
import '@angular/http';
import '@angular/router';
// angular2 cookie
import 'angular2-cookie/core'
// AngularClass
import '@angularclass/hmr';
// RxJS
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/mergeMap';
if ('production' === ENV) {
// Production
} else {
// Development
}Add CookieService to the APP_PROVIDERS array in the app.module.ts file (path: ./src/app/app.module.ts):
// ...
// Application wide providers
const APP_PROVIDERS = [
...APP_RESOLVER_PROVIDERS,
AppState,
CookieService
];
// ...There are 7 methods available in the CookieService (6 standard methods from Angular 1 and 1 extra removeAll() method for convenience)
Returns the value of given cookie key.
/**
* @param {string} key Id to use for lookup.
* @returns {string} Raw cookie value.
*/
get(key: string): string;Returns the deserialized value of given cookie key.
/**
* @param {string} key Id to use for lookup.
* @returns {Object} Deserialized cookie value.
*/
getObject(key: string): Object;Returns a key value object with all the cookies.
/**
* @returns {Object} All cookies
*/
getAll(): any;Sets a value for given cookie key.
/**
* @param {string} key Id for the `value`.
* @param {string} value Raw value to be stored.
* @param {CookieOptionsArgs} options (Optional) Options object.
*/
put(key: string, value: string, options?: CookieOptionsArgs): void;Serializes and sets a value for given cookie key.
/**
* @param {string} key Id for the `value`.
* @param {Object} value Value to be stored.
* @param {CookieOptionsArgs} options (Optional) Options object.
*/
putObject(key: string, value: Object, options?: CookieOptionsArgs): void;Remove given cookie.
/**
* @param {string} key Id of the key-value pair to delete.
* @param {CookieOptionsArgs} options (Optional) Options object.
*/
remove(key: string, options?: CookieOptionsArgs): void;Remove all cookies.
/**
*/
removeAll(): void;Options object should be a type of CookieOptionsArgs interface. The object may have following properties:
- path - {string} - The cookie will be available only for this path and its sub-paths. By default, this is the URL that appears in your
<base>tag. - domain - {string} - The cookie will be available only for this domain and its sub-domains. For security reasons the user agent will not accept the cookie if the current domain is not a sub-domain of this domain or equal to it.
- expires - {string|Date} - String of the form "Wdy, DD Mon YYYY HH:MM:SS GMT" or a Date object indicating the exact date/time this cookie will expire.
- secure - {boolean} - If
true, then the cookie will only be available through a secured connection.
The build process and the file structure of this repository has respectively modeled after the awesome angular2-google-maps project of Sebastian Müller.