Issue:
I'm facing a problem where I am unable to inject any service into the constructor of my HttpInterceptors. Every service I try to inject results in the error:
TypeError: Cannot set property 'authenticationService' of undefinedEven a simple dummy service like foo with a single function bar without any additional dependencies results in the same error.
CODE SNIPPET
interceptor.ts
import { Injectable, Injector } from '@angular/core';
import {
HttpRequest,
HttpHandler,
HttpEvent,
HttpInterceptor
} from '@angular/common/http';
import { AuthenticationService } from '../authentication/authentication.service';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class Interceptor implements HttpInterceptor {
constructor(private authenticationService: AuthenticationService) { }
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
if (request.url.includes(location.hostname) && this.authenticationService.getToken()) {
console.log('Headers added to the HTTP Request');
request = request.clone({
setHeaders: {
Authorization: `Bearer ${this.authenticationService.getToken()}`
}
});
}
return next.handle(request);
}
}
authentication.service.ts
import { OnInit, Injectable } from '@angular/core';
import { AuthServiceConfig, AuthService as SocialAuthService, FacebookLoginProvider, GoogleLoginProvider, SocialUser} from 'angularx-social-login';
import { HttpClient, HttpRequest } from '@angular/common/http';
import { BehaviorSubject, Observable } from 'rxjs';
import { environment } from '../../../environments/environment';
import { JwtHelperService } from '@auth0/angular-jwt';
@Injectable( { providedIn: "root" } )
export class AuthenticationService implements OnInit{
jwtHelper: JwtHelperService = new JwtHelperService();
socialLoginConfig: AuthServiceConfig;
loggedIn: BehaviorSubject<Boolean> = new BehaviorSubject<Boolean>(false);
loggedIn$: Observable<Boolean> = this.loggedIn.asObservable();
user: BehaviorSubject<SocialUser> = new BehaviorSubject(null);
user$: Observable<SocialUser> = this.user.asObservable();
cachedRequests: Array<HttpRequest<any>> = [];
constructor(private socialAuthService: SocialAuthService, private http: HttpClient) { }
// Rest of the methods in the AuthenticationService class...
app.module.ts
import { environment } from '../environments/environment';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginComponent } from './modules/public/pages/login/login.component';
import { SocialLoginModule, AuthServiceConfig } from "angularx-social-login";
import { GoogleLoginProvider, FacebookLoginProvider } from "angularx-social-login";
import { NavbarComponent } from './shared/components/navbar/navbar.component';
import { FooterComponent } from './shared/components/footer/footer.component';
import { HomeComponent } from './modules/public/pages/home/home.component';
import { UserComponent } from './modules/secure/pages/user/user.component';
import { HttpClientModule, HTTP_INTERCEPTORS} from '@angular/common/http';
import { Interceptor } from './core/interceptors/interceptor';
import { DashboardComponent } from './modules/secure/pages/dashboard/dashboard.component';
// Rest of the app.module.ts file...
Investigation/Problem-solving Attempted:
I have researched various posts and forums that suggest issues when injecting a service containing an HTTPClient reference, leading to a cyclic dependency error resulting in 'undefined'. Although this issue was reportedly fixed in an Angular 5 patch, I am currently using Angular 7 for this project.
I tried injecting an Injector instead of directly injecting the authenticationService into the constructor and then setting
this.authenticationService = this.injector.get(AuthenticationService);TypeError: Cannot set property 'injector' of undefinedAdditionally, I attempted to modify the provider for the HttpInterceptor in app.module.ts to:
{ provide: HTTP_INTERCEPTORS, useFactory: Interceptor, multi: true, deps: [AuthenticationService] }However, this also led to the same undefined error.
Conclusion:
Apologies for the lengthy details, but I wanted to provide all the relevant information in hopes of resolving this issue that has caused me significant frustration. Thank you in advance for any assistance!