Angular v17 SSR - InjectionToken for REQUEST/RESPONSE not working?

[Shamshiel]

See comment for resolution

Either I'm doing something wrong or cookies can't be retrieved from request headers via the SsrCookieService. It seems that SsrCookieService is not able to retrieve the request from the providers.

I have the server.ts and my guard like described below but the bearer token can't be retrieved. I checked the incoming request in the server and the cookie is available in the header. So I assume the request is for some reason not correctly provided to the SsrCookieService.

Is that a bug or am I doing something wrong?

server.ts

server.get('*', (req, res, next) => {
    const { protocol, originalUrl, baseUrl, headers } = req;

    commonEngine
      .render({
        bootstrap,
        documentFilePath: indexHtml,
        url: `${protocol}://${headers.host}${originalUrl}`,
        publicPath: browserDistFolder,
        providers: [
          { provide: APP_BASE_HREF, useValue: baseUrl },
          { provide: 'REQUEST', useValue: req },
          { provide: 'RESPONSE', useValue: res },
        ],
      })
      .then((html) => res.send(html))
      .catch((err) => next(err));
  });

Guard

export function authenticationGuard(): CanActivateFn {
    return () => {
        const authService: AuthService = inject(AuthService);
        const router: Router = inject(Router);
        const cookieService: SsrCookieService = inject(SsrCookieService);

        return authService.getUser().pipe(
            map((x) => {
                const bearerToken = cookieService.get('access_token');
                console.log('Bearer Token: ' + bearerToken);
                if (x.role !== 'admin') {
                    router.navigate(['/home']);
                    return false;
                }
                return true;
            })
        );
    };
}

Specifications

• Version: Angular 17.0.0 and ngx-cookie-service-ssr 17.0.0

[github-actions[bot]]

Hello 👋 @Shamshiel
Thank you for raising an issue. We will investigate into the issue and get back to you as soon as possible. Please make sure you have given us as much context as possible.
Feel free to raise a PR if you can fix the issue

[jnizet]

I think the issue is that the code uses a non-exported REQUEST InjectionToken, so providing the request under the string token 'REQUEST' won't work to populate it.

[pavankjadda]

@Shamshiel Can you share stackblitz reproduction?

[pavankjadda]

@Shamshiel create new issue by following issue template and stackblitz reproduction

[oriollpz]

Any news in this problem? I can't access my cookies in the SSR of Angular 17.

[pavankjadda]

Any news in this problem? I can't access my cookies in the SSR of Angular 17.

No. I am able to access them in my code. Can you share an example where you can't access them?

[oriollpz]

When you use a Guard and try to access the cookie when does SSR, it returns null the "req" Injection.

[zozjo]

Any news in this problem

[pavankjadda]

@oriollpz @zozjo Can anyone of you try share a StackBlitz example of tis problem?

[pavankjadda]

@oriollpz @zozjo @Shamshiel @jnizet Can you try version 17.0.1-rc.1and see if it fixes the issue?

[Shamshiel]

I haven't tried your RC but I fixed the issue by just copying your SsrCookieService in my project and exporting the REQUEST like this:

export const REQUEST = new InjectionToken<Request>('REQUEST');

and then importing it in the server.ts like this:

import { REQUEST } from './src/app/services/ssr-cookie.service';

---

So the issue is that in v17.0.0 of this library the InjectionToken is not exported. Just using the token 'REQUEST' does not work. I guess the RC would work if SSR_REQUEST is the actual exported InjectionToken for REQUEST.

[pavankjadda]

Fixed in version 17.0.1

[xalidevxx]

Fixed in version 17.0.1

Hi! I am facing the same error.

I am using: "@angular/ssr":"~17.0.0", "ngx-cookie-service-ssr": "^17.0.1"

I did console.log(this.cookieService.get('lang')) and got:

• server side: "undefined"
• client side: "ru"

Can you help me please. I have attached the screenshots.

[pavankjadda]

@xalidevxx See updated docs https://github.com/stevermeister/ngx-cookie-service?tab=readme-ov-file#server-side-rendering. You need to import REQUEST

[xalidevxx]

@xalidevxx See updated docs https://github.com/stevermeister/ngx-cookie-service?tab=readme-ov-file#server-side-rendering. You need to import REQUEST

I added the request as in the documentation. Then I built the project and run the production version locally. I output cookieService.get('lang') in app.component.html.

As a result:

• there is no cookie on the server side
• on the client side there is a cookie.

I expect the server version and browser version to should be the same.

Is this how it should work?

[xalidevxx]

@xalidevxx See updated docs https://github.com/stevermeister/ngx-cookie-service?tab=readme-ov-file#server-side-rendering. You need to import REQUEST

Hi! Can you help me please?

[davpirelli]

News about this issue? Still got same behaviour on latest release

[xalidevxx]

News about this issue? Still got same behaviour on latest release

Hi! I didn't find a solution and left it like that.

[pavankjadda]

All, I am looking at this. Stay tuned.

[rhutchison]

Might be related https://github.com/angular/angular-cli/issues/26323

[ydang204]

is there any news guys? I'm facing the same issue

[cskiwi]

Stumbled upon this issue as well. would be amazing to have it fixed :)

[humanely]

Any fixes yet?

[BenasPal]

Guys issue is related to https://github.com/angular/angular-cli/issues/26323, while running ng serve it wont work unless in angular v19. You need to npm run build:ssr and then npm run serve:ssr. Also make sure you provide request{ provide: REQUEST, useValue: req }, with import { REQUEST } from 'ngx-cookie-service-ssr';