Interceptors for request modification in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What does this Angular HTTP interceptor do to outgoing requests?

Consider this Angular HTTP interceptor code snippet. What is the effect on the outgoing HTTP requests?

Angular

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler } from '@angular/common/http';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler) {
    const clonedReq = req.clone({
      setHeaders: { Authorization: 'Bearer token123' }
    });
    return next.handle(clonedReq);
  }
}

A Blocks all outgoing HTTP requests and returns an error.

B Removes any Authorization header from outgoing HTTP requests.

C Modifies the request URL to add a query parameter 'token=token123'.

D Adds an Authorization header with value 'Bearer token123' to every outgoing HTTP request.

💡 Hint

Look at the clone method and what headers it sets.

The interceptor clones the original request and adds an Authorization header with the value 'Bearer token123'. This modified request is then passed on.

📝 Syntax

intermediate

Which option correctly modifies the request URL in an Angular interceptor?

You want to add a query parameter 'lang=en' to every outgoing HTTP request URL. Which interceptor code snippet correctly does this?

A const clonedReq = req.clone({ params: req.params.append('lang', 'en') });

B const clonedReq = req.clone({ setParams: { lang: 'en' } });

C const clonedReq = req.clone({ url: req.url + '?lang=en' });

D const clonedReq = req.clone({ queryParams: { lang: 'en' } });

💡 Hint

Check the HttpRequest clone method options for adding query parameters.

The correct way to add query parameters is to use the params property and append the new parameter.

🔧 Debug

advanced

Why does this interceptor fail to add the header?

This interceptor code is intended to add a custom header but it does not work. Why?

Angular

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler } from '@angular/common/http';

@Injectable()
export class CustomHeaderInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler) {
    req.headers.set('X-Custom-Header', 'value123');
    return next.handle(req);
  }
}

A The interceptor forgot to call next.handle(req).

B HttpRequest headers are immutable; set() returns a new headers object but does not modify the original.

C The header name 'X-Custom-Header' is invalid and causes an error.

D The interceptor must use req.clone() to modify the body, not headers.

💡 Hint

Think about immutability of HttpRequest and its headers.

HttpRequest and its headers are immutable. Calling set() on headers returns a new headers object but does not change the original. You must clone the request with the new headers.

❓ state_output

advanced

What is the output of this interceptor chain modifying headers?

Given two interceptors chained in this order, what is the final Authorization header value sent in the HTTP request?

Angular

/* Interceptor 1 */
intercept(req, next) {
  const cloned = req.clone({ setHeaders: { Authorization: 'Token1' } });
  return next.handle(cloned);
}

/* Interceptor 2 */
intercept(req, next) {
  const cloned = req.clone({ setHeaders: { Authorization: 'Token2' } });
  return next.handle(cloned);
}

A 'Token2', because the second interceptor overwrites the header set by the first.

B 'Token1', because the first interceptor sets it and the second does not change it.

C 'Token1, Token2', both headers are combined.

D No Authorization header is sent because of conflict.

💡 Hint

Later interceptors can overwrite headers set by earlier ones.

Each interceptor clones the request and sets the Authorization header. The last interceptor's value overwrites previous ones.

🧠 Conceptual

expert

Which statement about Angular HTTP interceptors is true?

Choose the correct statement about Angular HTTP interceptors and request modification.

A Interceptors can only modify the response, not the request.

B Interceptors can directly modify the HttpRequest object without cloning it.

C Interceptors can modify requests but must always clone the HttpRequest object because it is immutable.

D Interceptors are only called once per application lifetime.

💡 Hint

Think about how Angular handles HttpRequest objects internally.

HttpRequest objects are immutable. Interceptors must clone them to modify headers, URL, or body.

Practice

1. What is the main purpose of an HTTP interceptor in Angular?

easy

A. To modify HTTP requests before they are sent

B. To create new HTTP requests from scratch

C. To handle user input events

D. To style components dynamically

Solution

1. Step 1: Understand the role of interceptors

   Interceptors are designed to catch HTTP requests and responses to modify or handle them.

2. Step 2: Identify the correct purpose

   Among the options, only modifying HTTP requests before sending matches the interceptor's role.

3. Final Answer:

   To modify HTTP requests before they are sent -> Option A

4. Quick Check:

   Interceptor purpose = modify requests [OK]

Hint: Interceptors change requests before sending [OK]

Common Mistakes:

• Thinking interceptors create requests
• Confusing interceptors with event handlers
• Assuming interceptors style components

2. Which method is used to safely modify an HTTP request inside an Angular interceptor?

easy

A. req.clone()

B. req.change()

C. req.update()

D. req.modify()

Solution

1. Step 1: Recall Angular HTTP request immutability

   HTTP requests are immutable, so you cannot change them directly.

2. Step 2: Use the clone method to modify

   The correct way is to create a copy with changes using req.clone().

3. Final Answer:

   req.clone() -> Option A

4. Quick Check:

   Modify request = req.clone() [OK]

Hint: Use req.clone() to change requests safely [OK]

Common Mistakes:

• Trying to modify request directly
• Using non-existent methods like req.modify()
• Confusing clone with update or change

3. Given this interceptor code snippet, what will be the value of the 'Authorization' header in the outgoing request?

intercept(req, next) {
  const cloned = req.clone({
    setHeaders: { Authorization: 'Bearer token123' }
  });
  return next.handle(cloned);
}

medium

A. An error will occur due to incorrect syntax

B. No Authorization header will be set

C. 'token123'

D. 'Bearer token123'

Solution

1. Step 1: Analyze the clone method usage

   The code clones the request and sets the 'Authorization' header to 'Bearer token123'.

2. Step 2: Understand header setting effect

   The cloned request will have the header exactly as set, so the header value is 'Bearer token123'.

3. Final Answer:

   'Bearer token123' -> Option D

4. Quick Check:

   Header set to 'Bearer token123' [OK]

Hint: Headers set in clone appear in outgoing request [OK]

Common Mistakes:

• Assuming header is missing
• Confusing header value with token only
• Thinking syntax causes error

4. Identify the error in this Angular interceptor code:

intercept(req, next) {
  req.setHeaders({ 'Content-Type': 'application/json' });
  return next.handle(req);
}

medium

A. Missing return statement

B. req.setHeaders is not a function

C. next.handle should be called with a cloned request

D. Headers cannot be set in interceptors

Solution

1. Step 1: Check method existence on req

   The HttpRequest object is immutable and does not have a setHeaders method.

2. Step 2: Understand correct way to set headers

   Headers must be set by cloning the request with new headers using req.clone().

3. Final Answer:

   req.setHeaders is not a function -> Option B

4. Quick Check:

   setHeaders method does not exist [OK]

Hint: HttpRequest is immutable; no setHeaders method [OK]

Common Mistakes:

• Trying to call setHeaders directly
• Ignoring immutability of HttpRequest
• Thinking headers can't be changed at all

5. You want to add a custom header 'X-App-Version' with value '1.0' to all outgoing HTTP requests in your Angular app. Which is the best way to do this?

hard

A. Add the header manually in every HTTP call

B. Modify the HttpClient service to include the header

C. Create an interceptor that clones requests and sets the header, then register it globally

D. Use a component to add the header before each request

Solution

1. Step 1: Understand global header addition

   Manually adding headers everywhere is error-prone and repetitive.

2. Step 2: Use interceptor for centralized modification

   Interceptors allow modifying all requests in one place by cloning and setting headers, then registering globally.

3. Final Answer:

   Create an interceptor that clones requests and sets the header, then register it globally -> Option C

4. Quick Check:

   Global header addition = interceptor + clone + register [OK]

Hint: Use interceptor to add headers globally [OK]

Common Mistakes:

• Adding headers manually in every call
• Trying to modify HttpClient directly
• Using components for HTTP header changes