In an Angular 7 project I am working on, there is some code that was written around 5-6 years ago. I am currently in the process of updating the application to the latest version of Angular. My focus right now is on testing the login functionality of the app which uses basic HTTP authentication. Refactoring this part of the code is the final step before upgrading the entire UI from Angular 7 to 14.
Below is the old code snippet:
import { ConnectionBackend, Http, Request, RequestOptions, RequestOptionsArgs, Response, XHRBackend } from '@angular/http';
import { AuthService } from './../auth/auth.service';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
@Injectable()
export class AuthHttp extends Http {
constructor(backend: XHRBackend, defaultOptions: RequestOptions, private auth : AuthService) {
super(backend, defaultOptions);
this.auth = auth;
}
// Other methods and operations go here...
}
I have attempted various approaches to refactor the code but haven't made much progress. As a first-time Angular user, navigating through this moderately sized project has been challenging. While searching for solutions, I haven't come across anyone tackling a similar issue.
The compilation does not throw any errors when using an empty class as shown below. The imports seem to be equivalent or close to it for the new HttpClient module in Angular.
import { AuthService } from './../auth/auth.service';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { HttpClient, HttpParams, HttpHeaders, HttpXhrBackend, HttpResponse, HttpBackend, HttpRequest, HttpEvent } from '@angular/common/http';
@Injectable()
export class AuthHttp extends HttpClient {}
However, upon running ng serve
with the blank class above, I encounter two errors in the browser console:
ERROR NullInjectorError: R3InjectorError(AppModule)[ApiService -> ApiService -> ApiService]:
NullInjectorError: No provider for ApiService!
Angular 9
AppComponent_Factory app.component.ts:11
Angular 26
631 main.ts:11
Webpack 7
core.mjs:6362:22
Angular 16
Any guidance on how to proceed or useful resources would be greatly appreciated. Thank you.
This is the implementation of the ApiService:
@Injectable()
export class ApiService {
// Methods and operations within the service go here...
}