Platform Server – Attach cookies to HTTP requests

Explanation of the problem

The issue reported involves the inability to attach cookies to an HTTP request when running the application on a server platform using Angular v2.x.x. In previous versions of Angular, such as Universal, it was possible to manually set the ‘Cookie’ header property. However, attempting to do so in the current version results in a warning stating that it is unsafe to set the cookie header, which is logged by the node-xhr2 library.

Ideally, the ability to pass cookies to an HTTP request should be available in the current version of Angular, as it has been previously requested in the roadmap without any suggestions or answers provided. The absence of this functionality can lead to different server responses compared to client responses, and can also render the usage of transfer state unsafe as the browser will not fire an HTTP request and will instead use the response received from the server.

Troubleshooting with the Lightrun Developer Observability Platform

Getting a sense of what’s actually happening inside a live application is a frustrating experience, one that relies mostly on querying and observing whatever logs were written during development.
Lightrun is a Developer Observability Platform, allowing developers to add telemetry to live applications in real-time, on-demand, and right from the IDE.

• Instantly add logs to, set metrics in, and take snapshots of live applications
• Insights delivered straight to your IDE or CLI
• Works where you do: dev, QA, staging, CI/CD, and production

Start for free today

Problem solution for: Platform Server – Attach cookies to HTTP requests

The issue has been reported with Angular version 4.0.0, using TypeScript 2.2.2. A possible solution to this issue involves passing the cookies as a separate parameter in the request options, rather than setting it in the ‘Cookie’ header. This can be achieved using the following code block:

import { HttpClient, HttpHeaders } from '@angular/common/http';

const headers = new HttpHeaders().set('Content-Type', 'application/json');
const options = { headers: headers, withCredentials: true };
const url = 'http://example.com/api/data';

this.http.get(url, options)
  .subscribe(data => {
    console.log(data);
  });

1. Problem: “Cannot read property ‘length’ of undefined” error when using the async pipe with a BehaviorSubject. Description: Users have reported an error when using the async pipe with a BehaviorSubject. The error message is “Cannot read property ‘length’ of undefined”. This error occurs when the BehaviorSubject has not yet emitted any values and the async pipe tries to access the length property of the value. Solution: One solution is to initialize the BehaviorSubject with a default value. For example:

private dataSubject = new BehaviorSubject<any[]>([]);
data$ = this.dataSubject.asObservable();

Then, in the component, check if the value is undefined before accessing its length property:

<ng-container *ngIf="data$ | async as data">
  <div *ngIf="data.length > 0">
    // Display data here
  </div>
</ng-container>

1. Problem: Error “zone.js has detected that ZoneAwarePromise (window|global).Promise has been overwritten” when running Angular tests. Description: When running Angular tests, users have reported an error message that says “zone.js has detected that ZoneAwarePromise (window|global).Promise has been overwritten”. This error occurs when a third-party library, such as a polyfill, overwrites the global Promise object. Solution: One solution is to use the zone.js library to patch the global Promise object before running the tests. Add the following line to the test.ts file:

import 'zone.js/testing';

Then, in the beforeEach function of the test, patch the Promise object:

beforeEach(() => {
  (window as any)['Promise'] = Promise;
});

3. Problem: Error “Maximum call stack size exceeded” when using ng serve. Description: Some users have reported an error message that says “Maximum call stack size exceeded” when running the ng serve command. This error occurs when there is a circular dependency in the application. Solution: One solution is to use the Angular dependency injection system to break the circular dependency. For example, if ComponentA depends on ComponentB and ComponentB depends on ComponentA, create a new service and move the shared logic to the service. Then, inject the service into both components. For example:

@Injectable({ providedIn: 'root' })
export class SharedService {
  // Shared logic here
}

@Component({...})
export class ComponentA {
  constructor(private sharedService: SharedService) {}
  // Use the shared service here
}

@Component({...})
export class ComponentB {
  constructor(private sharedService: SharedService) {}
  // Use the shared service here
}

A brief introduction to angular

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-button',
  template: `
    <button [class]="classes">
      {{label}}
    </button>
  `
})
export class ButtonComponent {
  @Input() label: string;
  @Input() classes: string;
}

# Install Ionic CLI
npm install -g @ionic/cli

# Create a new Ionic app with Angular
ionic start myApp --type=angular

# Add a new page to the app
ionic generate page myPage

# Build and run the app on a mobile device
ionic capacitor add ios
ionic capacitor copy ios
ionic capacitor open ios