Skip to content

Commit

Permalink
feat(core): adds angular 15 support (#249)
Browse files Browse the repository at this point in the history
* feat(deps): updates angular deps to 15.0.0-rc.0

* feat(deps): updates angular deps to 15.0.0-rc.1

* feat(deps): updates angular deps to 15.0.0-rc.2

* release: bump version to 15.0.0-rc.1

* release: bump version to 15.0.0-rc.2

* release: bump version to 15.0.0-rc.3

* feat(core): adds support for angular 15

* release: bump version to 15.0.0
  • Loading branch information
pavankjadda authored Nov 16, 2022
1 parent 3d0928a commit 5f4f36c
Show file tree
Hide file tree
Showing 14 changed files with 14,896 additions and 15,538 deletions.
2 changes: 1 addition & 1 deletion .github/workflows/ci.yml
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ jobs:
strategy:
matrix:
os: ['ubuntu-latest']
node: ['14']
node: ['18']
steps:
- uses: actions/checkout@v2
- name: Use Node.js ${{ matrix.node }}
Expand Down
2 changes: 1 addition & 1 deletion .github/workflows/npm_publish.yml
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ jobs:
- uses: actions/checkout@v1
- uses: actions/setup-node@v1
with:
node-version: 14
node-version: 18
- name: Install NPM Dependencies
run: npm i --legacy-peer-deps
- name: Build project
Expand Down
2 changes: 1 addition & 1 deletion .github/workflows/npm_publish_ssr.yml
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ jobs:
- uses: actions/checkout@v1
- uses: actions/setup-node@v1
with:
node-version: 14
node-version: 18
- name: Install NPM Dependencies
run: npm i --legacy-peer-deps
- name: Build project
Expand Down
59 changes: 35 additions & 24 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,9 @@

</p>

Angular service to read, set and delete browser cookies. Originally based on the [ng2-cookies](https://www.npmjs.com/package/ng2-cookies) library. The experienced team behind [Studytube](https://www.studytube.nl/) will take care of our cookie service from now on.

> Note: `ViewEngine` support has been removed on 13.x.x. See [compatability matrix](https://github.com/stevermeister/ngx-cookie-service#supported-versions) for details
Angular service to read, set and delete browser cookies. Originally based on
the [ng2-cookies](https://www.npmjs.com/package/ng2-cookies) library. The experienced team
behind [Studytube](https://www.studytube.nl/) will take care of our cookie service from now on.

## Installation

Expand All @@ -28,10 +28,11 @@ yarn add ngx-cookie-service
```

## Usage

Add the cookie service to your `app.module.ts` as a provider:

```typescript
import { CookieService } from 'ngx-cookie-service';
import {CookieService} from 'ngx-cookie-service';

@NgModule({
...
Expand All @@ -57,9 +58,11 @@ cookieService: CookieService
```

That's it!

### Angular 14+
1. Angular 14 introduced support for standalone components.
If you are using just standalone components, you can import the service directly into the component

1. Angular 14 introduced support for standalone components.
If you are using just standalone components, you can import the service directly into the component
```typescript
import {CookieService} from 'ngx-cookie-service';
import {Component} from '@angular/core';
Expand Down Expand Up @@ -97,8 +100,11 @@ If you are using just standalone components, you can import the service directly
}
}
```

## Server Side Rendering
Ngx Cookie Service supports Server Side Rendering (SSR) via dedicated library [ngx-cookie-service-ssr](https://www.npmjs.com/package/ngx-cookie-service-ssr).

Ngx Cookie Service supports Server Side Rendering (SSR) via dedicated
library [ngx-cookie-service-ssr](https://www.npmjs.com/package/ngx-cookie-service-ssr).
Only install `ngx-cookie-service-ssr` library (and skip `ngx-cookie-service`) for SSR

1. Install the library using below command
Expand All @@ -110,31 +116,34 @@ Only install `ngx-cookie-service-ssr` library (and skip `ngx-cookie-service`) fo
yarn add ngx-cookie-service-ssr
```
2. By default, browser cookies are not
available in SSR because `document` object is not available. To overcome this, navigate to `server.ts` file in your SSR
project, and replace the following code

available in SSR because `document` object is not available. To overcome this, navigate to `server.ts` file in your
SSR
project, and replace the following code

```typescript
server.get('*', (req, res) => {
res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
});
```

with this

```typescript
server.get('*', (req, res) => {
res.render(indexHtml, {
req,
providers: [
{ provide: APP_BASE_HREF, useValue: req.baseUrl },
{ provide: 'REQUEST', useValue: req },
{ provide: 'RESPONSE', useValue: res },
],
});
});
res.render(indexHtml, {
req,
providers: [
{provide: APP_BASE_HREF, useValue: req.baseUrl},
{provide: 'REQUEST', useValue: req},
{provide: 'RESPONSE', useValue: res},
],
});
});
```

3. This will make sure the cookies are available in `REQUEST` object, and the `ngx-cookie-service-ssr` can use `REQUEST.cookies` to access the
cookies in SSR. Then proceed to use `ngx-cookie-service` as usual.
3. This will make sure the cookies are available in `REQUEST` object, and the `ngx-cookie-service-ssr` can
use `REQUEST.cookies` to access the
cookies in SSR. Then proceed to use `ngx-cookie-service` as usual.
4. See the [sample repo](https://github.com/pavankjadda/angular-ssr-docker) for more details.

## Demo
Expand All @@ -147,8 +156,10 @@ https://stackblitz.com/edit/angular-ivy-1lrgdt?file=src%2Fapp%2Fapp.component.ts
library. For versions <=12.x.x, use 12.0.3 version

| Angular Version | Supported Version |
| ---------------------- | ----------------- |
| 13.x.x or later (Ivy) | 13.x.x or later |
|------------------------|-------------------|
| 15.x.x | 15.x.x |
| 14.x.x | 14.x.x |
| 13.x.x | 13.x.x |
| <=12.x.x (View Engine) | 12.0.3 |

# API
Expand Down Expand Up @@ -183,7 +194,7 @@ Returns a map of key-value pairs for cookies that can be accessed.

```typescript
cookieService.set('test', 'Hello World');
cookieService.set('test', 'Hello World', { expires: 2, sameSite: 'Lax' });
cookieService.set('test', 'Hello World', {expires: 2, sameSite: 'Lax'});
```

Sets a cookie with the specified `name` and `value`. It is good practice to specify a path. If you are unsure about the
Expand Down
Loading

0 comments on commit 5f4f36c

Please sign in to comment.