Skip to main content

Return to Question

added 1322 characters in body
Source Link
SillyPerson
SillyPerson
  • 619
  • 2
  • 9
  • 31

Additional Information:

I have a base.component.ts which calls 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);
  }

Then I extent other components with Base.component.ts to use the MonitorningService as below. For example home.component.ts uses MonitoringService as below:

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);
  }

Additional Information:

I have a base.component.ts which calls 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);
  }

Then I extent other components with Base.component.ts to use the MonitorningService as below. For example home.component.ts uses MonitoringService as below:

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);
  }
added 1179 characters in body
Source Link
SillyPerson
SillyPerson
  • 619
  • 2
  • 9
  • 31

This is the provider section of 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 { }

This is the provider section of app.module.ts:

import { ClientAppSettingService } from './services/clientAppSettings.service';
import { MonitoringService } from './services/monitoring.service';
 providers: [
    ClientAppSettingService,
    MonitoringService
    ]

This is 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 { }
Source Link
SillyPerson
SillyPerson
  • 619
  • 2
  • 9
  • 31

Angular Inject Service into Service : No Provider

I have two services in Angular:

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 is the provider section of app.module.ts:

import { ClientAppSettingService } from './services/clientAppSettings.service';
import { MonitoringService } from './services/monitoring.service';
 providers: [
    ClientAppSettingService,
    MonitoringService
    ]

I followed this , which says that you need to provide service in the provider of NgModule.

I also followed this, which says

Make sure you declare a provider for ClientAppSettingService before you declare a provider for MonitorningService

I also tried adding @Inject in my constructor as below:

constructor( @Inject(ClientAppSettingService) _clientAppSettingService: ClientAppSettingService)

However, I still receive error regarding No Provider:

ERROR Error: Uncaught (in promise): Error: No provider for ClientAppSettingService! (MonitoringService -> ClientAppSettingService) Error: No provider for ClientAppSettingService! (MonitoringService -> ClientAppSettingService)