Angular 8 : No provider for HttpClient in service - angular8

Question

In order to migrate an Angular 5 project to Angular 8, I've created an empty project with Angular CLI and copied my modules, components and services in my new project structure.
The project builds, but at the execution I've got the classic message "No provider for HttpClient in service" :
ERROR NullInjectorError: StaticInjectorError(AppModule)[TimeService -> HttpClient]:
StaticInjectorError(Platform: core)[TimeService -> HttpClient]:
NullInjectorError: No provider for HttpClient!
at NullInjector.get (http://localhost:4200/vendor.js:50573:27)
at resolveToken (http://localhost:4200/vendor.js:52359:24)
at tryResolveToken (http://localhost:4200/vendor.js:52285:16)
at StaticInjector.get (http://localhost:4200/vendor.js:52148:20)
at resolveToken (http://localhost:4200/vendor.js:52359:24)
at tryResolveToken (http://localhost:4200/vendor.js:52285:16)
at StaticInjector.get (http://localhost:4200/vendor.js:52148:20)
at resolveNgModuleDep (http://localhost:4200/vendor.js:76198:29)
at _createClass (http://localhost:4200/vendor.js:76275:32)
at _createProviderInstance (http://localhost:4200/vendor.js:76231:26)
I thing my app.module.ts is ok : I'm importing HttpClientModule and I've put it in #NgModule imports, just after BrowserModule.
#NgModule({
declarations: [AppComponent,DelegationsComponent],
imports: [BrowserModule,
HttpClientModule,
GlobalModule.forRoot(),
AuthenticationModule,
DelegationModule,
routing,
FormsModule,
ReactiveFormsModule,
BrowserAnimationsModule,
ButtonModule, TableModule, DialogModule, DropdownModule, ToastModule, TabViewModule, InputTextModule, AutoCompleteModule, TooltipModule, CheckboxModule, OverlayPanelModule, MultiSelectModule, CalendarModule ],
providers: [APP_ROUTER_PROVIDERS, {provide: APP_BASE_HREF, useValue: getBaseHref()}],
bootstrap: [AppComponent]
})
The error seems to be in TimeService. In this service, HttpClient is imported and injected in the contructor.
import {HttpClient} from "#angular/common/http";
#Injectable()
export class TimeService extends BaseService {
constructor(private http: HttpClient)
Then, TimeService is injected in DelegationsComponent.
import {TimeService} from "utils/time.service";
#Component({
moduleId: __moduleName,
selector: 'delegations',
templateUrl: './delegations.component.html'
})
export class DelegationsComponent implements OnInit, OnDestroy {
constructor(private timeService: TimeService)
And you can see DelegationsComponent in my app.module.ts declarations.
Any idea ?
Thank you
EDIT :
By trying to reproduce the problem on a small example, I've found the cause : time.service.ts is not in my angular app but in a folder outside, because I'm sharing it with two other angular apps. I'm including it thanks to the package.json of my apps :
"utils": "file:../../../../../utils"
So time.service.ts ends in node_modules/utils. If I put it in the src/app directory, it works. Any idea why it doesn't work this way, and how I can share a service amongst several angular apps ?

Answer 1

The error =>
ERROR NullInjectorError: StaticInjectorError(AppModule)[TimeService -> HttpClient]:
StaticInjectorError(Platform: core)[TimeService -> HttpClient]:
Below solution is worked for me and I am using Angular version-9
=> Need to add => import {HttpClientModule} from '#angular/common/http'; in app.module.ts and also in the [import] array.

Answer 2

You need to provide your service in the root (or the components you desire) in order to inject it in the application. Otherwise, the imported HttpClientModule will not be imported for the injectable.
For providing in the root, use providedIn property like following:
#Injectable({
providedIn: 'root'
})
export class TimeService extends BaseService {
constructor(private http: HttpClient){}
}
If you want to provide a service in a component, then you need to set it in providers property of component decorator like following:
#Component({
moduleId: __moduleName,
selector: 'delegations',
templateUrl: './delegations.component.html',
providers: [
TimeService
]
})
export class DelegationsComponent implements OnInit, OnDestroy {
constructor(private timeService: TimeService){}
}
Then import TimeService and HttpClientModule in app.module.ts (or in your feature module).
You can find a working example here: https://stackblitz.com/edit/angular-bzvgwn

Answer 3

import this inside your app.module.ts.This will work
import { HttpModule } from "#angular/http";