CODEWITHSUNDEEP
angulartypescriptangular11
Hirusha Fernando
Hirusha Fernando

Reputation: 1265

Angular 11 Generic type 'HttpRequest<T>' requires 1 type argument(s).ts(2314)

I'm practicing Angular JWT Authentication and Authorization. This is my auth.interceptor.ts file:

import { HTTP_INTERCEPTORS, HttpEvent } from "@angular/common/http";
import { Injectable } from "@angular/core";
import { HttpInterceptor, HttpHandler, HttpRequest } from "@angular/common/http";
import { Observable } from "rxjs";

import { TokenStorageService } from "../services/token-storage.service";


const TOKEN_HEADER_KEY = "Authorization";

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
    
    constructor(private token:TokenStorageService) { }

    intercept(req: HttpRequest, next:HttpHandler): Observable<any> {
        let authReq = req;
        const token = this.token.getToken();
        if (token != null) {
            authReq = req.clone({ headers: req.headers.set(TOKEN_HEADER_KEY, 'Bearer' + token) });
        }
        return next.handle(authReq);
    }
}

export const authInterceptorproviders = [
    { provide: HTTP_INTERCEPTORS, userClass: AuthInterceptor, multi: true }
];

I'm getting this error from HttpRequest (10th line)

Generic type 'HttpRequest<T>' requires 1 type argument(s).ts(2314)

Why am I getting this error ? Any Solutions ?

Upvotes: 1

Views: 3518

Answers (2)

Masoud Bimar
Masoud Bimar

Reputation: 7781

HttpRFesponce is a generic type of t Because of Body:

/**
 * An outgoing HTTP request with an optional typed body.
 *
 * `HttpRequest` represents an outgoing request, including URL, method,
 * headers, body, and other request configuration options. Instances should be
 * assumed to be immutable. To modify a `HttpRequest`, the `clone`
 * method should be used.
 *
 * @publicApi
 */
export declare class HttpRequest<T> {
    readonly url: string;
    /**
     * The request body, or `null` if one isn't set.
     *
     * Bodies are not enforced to be immutable, as they can include a reference to any
     * user-defined data type. However, interceptors should take care to preserve
     * idempotence by treating them as such.
     */
    readonly body: T | null;
    
    //..
}

To Fix it you can use it this way:

@Injectable({
  providedIn: 'root'
})
export class TokenInterceptor implements HttpInterceptor {
  constructor(public authService: AuthenticationService) {}

  /**
   * The Interceptors are called in the order they are defined in provider metadata.
   * @param HttpRequest request The HttpRequest is an outgoing HTTP request which is being intercepted.
   * It contains URL, method, headers, body and other request configuration.
   * @param HttpHandler next The HttpHandler dispatches the HttpRequest to the next Handler using the method HttpHandler.handle.
   * The next handler could be another Interceptor in the chain or the Http Backend.
   */
  intercept(request: HttpRequest<any> /* <any> added here */, next: HttpHandler): Observable<HttpEvent<any>> {

    // this.is a sample
    request = request.clone({
      setHeaders: {
        Authorization: 'Bearer ' + JSON.parse(this.authService.getToken())
      }
    });
    return next.handle(request);
  }
}

Upvotes: 1

errorau
errorau

Reputation: 2334

You in 'HttpRequest' should be a concrete type complex or primitive

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
      /// your code
    }

Upvotes: 6

Related Questions