In Angular, I have set up two services:
MonitoringService.service.ts:
import { ClientAppSettingService } from './clientAppSettings.service';
import { Injectable, Inject } from '@angular/core';
@Injectable()
export class MonitoringService
{
constructor(private _clientAppSettingService: ClientAppSettingService)
{
this.getclientAppSettings();
}
getclientAppSettings(): any {
this._clientAppSettingService.getConfig().subscribe(result => {
this.data = result;
}, error => console.error(error));
}
and ClientAppSetting.service.ts:
import { Injectable, Inject } from '@angular/core';
import { AppSettingsClient } from '../models/appSettingsClient';
import { HttpClient } from '@angular/common/http';
@Injectable()
export class ClientAppSettingService {
appUrl: string = "";
constructor(private http: HttpClient, @Inject('BASE_URL') baseUrl: string) {
this.appUrl = baseUrl;
}
getConfig() {
return this.http.get<AppSettingsClient>(this.appUrl + 'api/ClientAppSettings/Get');
}
}
This snippet is from app.module.ts:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule } from '@angular/router';
import { ClientAppSettingService } from './services/clientAppSettings.service';
import { HomeService } from './services/home.service';
import { AppComponent } from './app.component';
import { MonitoringService } from './services/monitoring.service';
import { HomeComponent } from './home/home.component';
import { EmbedReportComponent } from './embedReport/embedReport.component';
import { BaseComponent } from './base.component';
@NgModule({
declarations: [
AppComponent,
HomeComponent,
EmbedReportComponent,
BaseComponent
],
imports: [
BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
HttpClientModule,
FormsModule,
RouterModule.forRoot([
{ path: '', component: HomeComponent, pathMatch: 'full' },
{ path: 'report', component: EmbedReportComponent }
])
],
providers: [
ClientAppSettingService,
HomeService,
ReportService,
MonitoringService
],
bootstrap: [AppComponent]
})
export class AppModule { }
I referenced a solution on Stack Overflow, which suggested providing the service in the provider of NgModule.
While troubleshooting, I ensured that there was a Provider for ClientAppSettingService before declaring one for MonitorningService.
I attempted to add @Inject in my constructor as shown below:
constructor( @Inject(ClientAppSettingService) _clientAppSettingService: ClientAppSettingService)
However, an error persisted indicating "No Provider for ClientAppSettingService!"
Additional Details:
In my base.component.ts, I utilized the MonitoringService:
import { MonitoringService } from './services/monitoring.service';
import { Component, ReflectiveInjector, OnInit } from '@angular/core';
@Component({
template: ''
})
export class BaseComponent
{
constructor(private _monitoringService: MonitoringService)
{
const injector = ReflectiveInjector.resolveAndCreate([
MonitoringService
]);
this._monitoringService = injector.get(MonitoringService);
}
Subsequently, other components extended Base.component.ts to leverage the MonitorningService. For example, home.component.ts utilizes MonitoringService in this manner:
import { Home } from '../models/home';
import { BaseComponent } from '../base.component';
import { MonitoringService } from '../services/monitoring.service';
@Component({
selector: 'app-home',
templateUrl: './home.component.html'
})
export class HomeComponent extends BaseComponent implements OnInit
{
home: Home;
constructor(private homeService: HomeService, private _monitorningService: MonitoringService)
{
super(_monitorningService);
}