Error de Angular 5 Http Interceptors al inyectar servicio

Nuestros desarrolladores estrellas han agotado sus reservas de café, en su búsqueda todo el tiempo por la solución, hasta que Rodrigo halló la solución en GitLab y en este momento la compartimos aquí.

Solución:

Actualización a finales de enero de 2018

Angular Team resolvió este problema en Angular 5.2.3 lanzado el 31 de enero de 2018. Después de actualizar la versión angular, podrá inyectar servicios que usan HTTPClient como de costumbre en el constructor

Corrección de errores

común: permite que HttpInterceptors inyecte HttpClient (#19809) (ed2b717), cierra #18224

del registro de cambios de Angular

Entonces resulta que si el servicio que inyecta en Http Interceptor tiene una dependencia de HttpClientesto conduce a una dependencia cíclica.

Desde mi AuthService era una combinación de todas las lógicas diferentes (iniciar/cerrar sesión, enrutar al usuario, guardar/cargar tokens, hacer llamadas a la API), separé la parte necesaria para los interceptores en su propio servicio (solo las credenciales y los tokens del usuario) y ahora lo inyecté con éxito en el interceptor.

export class AuthInterceptor implements HttpInterceptor 
    constructor(private credentials: CredentialsService) 
    intercept(request: HttpRequest, next: HttpHandler): Observable> 
        const token = this.credentials.getToken();
        const api_key = this.credentials.getApiKey();
    


export class CredentialsService 
    token: string;
    user: IUser;
    constructor(private http: HttpClient) 
        this.loadCredentialsFromStorage();
    

Esto parece que funciona bien. Espero que esto ayude a alguien.

necesitas agregar Injector en el constructor e inyectar AuthService a través del inyector

export class AuthInterceptor implements HttpInterceptor 
            constructor(private inj: Injector) 

            intercept(req: HttpRequest, next: HttpHandler): Observable> 
                const auth = this.inj.get(AuthService);
                const token = this.auth.getToken();
                return next.handle(req);
            
        

no olvides importar

import Injector from '@angular/core';

Comentarios y calificaciones del post

Si entiendes que ha resultado de provecho este artículo, sería de mucha ayuda si lo compartes con el resto juniors de esta forma nos ayudas a difundir esta información.

---

---

Utiliza Nuestro Buscador