Error in a queuing service, NullInjectorError: No provider for HttpServiceService

Question

Error in a queuing service, NullInjectorError: No provider for HttpServiceService

Navigation

#1 by (1 votes)

0

According to what I have been reading because of the error it gives me, it is because I lack some import in the module of the app, but I do not see any missing, I have the service and the component from where I call the service and the module of the app in different folders, that does not influence no?

The module of the app:

    import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';
import { WelcomerSelectHotelComponent } from './components/welcomer-select-hotel/welcomer-select-hotel.component';
import { AppRoutesModule } from './app-routes.module';


@NgModule({
  declarations: [
    AppComponent,
    WelcomerSelectHotelComponent
  ],
  imports: [
    BrowserModule,
    AppRoutesModule,
    HttpClientModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

This is my service

    import { Injectable } from '@angular/core';
    import { HttpClient } from '@angular/common/http';
    import { HttpClientModule } from '@angular/common/http';


    @Injectable()
    export class HttpServiceService {


      private ROOT_URL = 'https://...............';

      constructor(private http: HttpClient) {}

      getPosts() {
        return this.http.get('${this.ROOT_URL}');
      }


    }

the error you give me is something like this:

ERROR Error columnNumber: 31 fileName:   " link line 597 > eval"   lineNumber: 814 message: "Uncaught (in promise): Error:   StaticInjectorError (AppModule) [WelcomerSelectHotelComponent - >   HttpServiceService]: \ n StaticInjectorError (Platform:   core) [WelcomerSelectHotelComponent - > HttpServiceService]: \ n
  NullInjectorError: No provider for   HttpServiceService! \ N_NullInjector.prototype.get@webpack-internal: ///./node_modules/@angular/core/esm5/core.js: 1219: 19 \ nresolveToken @ webpack-internal: ///./node_modules/@angular /core/esm5/core.js:1517:17\ntryResolveToken@webpack-internal:///./node_modules/@angular/core/esm5/core.js:1459:16\nStaticInjector.prototype.get@webpack-internal : ///./node_modules/@angular/core/esm5/core.js: 1327: 20 \ nresolveToken @ webpack-internal: ///./node_modules/@angular/core/esm5/core.js: 1517: 17 \ ntryResolveToken @ webpack-internal: ///./node_modules/@angular/core/esm5/core.js: 1459: 16 \ nStaticInjector.prototype.get@webpack-internal: ///./node_modules/@angular/core /esm5/core.js:1327:20\nresolveNgModuleDep@webpack-internal:///./node_modules/@angular/core/esm5/core.js:11112:12\nNgModuleRe... "   promise: Object { zone_symbol__state: 0, __zone_symbol__value: Error   } rejection: Error:   StaticInjectorError (AppModule) [WelcomerSelectHotelComponent - >   HttpServiceService]: StaticInjectorError (Platform:   core) [WelcomerSelectHotelComponent - > HttpServiceService]:       NullInjectorError: No provider for HttpServiceService! Stack trace: [object Object] stack:   "resolvePromise @ webpack-internal: ///./node_modules/zone.js/dist/zone.js: 814: 31 \ nresolvePromise @ webpack-internal: ///./node_modules/zone.js/dist/zone.js : 771: 17 \ nscheduleResolveOrReject / < @ webpack-internal: ///./node_modules/zone.js/dist/zone.js: 873: 17 \ nZoneDelegate.prototype.invokeTask@webpack-internal: ///./ node_modules / zone.js / dist / zone.js: 421: 17 \ nonInvokeTask @ webpack-internal: ///./node_modules/@angular/core/esm5/core.js: 4967: 24 \ nZoneDelegate.prototype.invokeTask @ webpack-internal: ///./node_modules/zone.js/dist/zone.js: 420: 17 \ nZone.prototype.runTask@webpack-internal: ///./node_modules/zone.js/dist/zone. js: 188: 28 \ ndrainMicroTaskQueue @ webpack-internal: ///./node_modules/zone.js/dist/zone.js: 595: 25 \ nZoneTask.invokeTask@webpack-internal: ///./node_modules/zone. js / dist / zone.js: 500: 21 \ ninvokeTask @ webpack-internal: ///./node_modules/zone.js/dist/zone.js: 1540: 9 \ nglobalZoneAwareCallback @ webpack-internal: ///./ node_modules / zone.js / dist / zone.js: 1566: 17 \ n "   task: Object {runCount: 0, _state: "notScheduled", type: "microTask",   ...} zone: Object {_properties: {...}, _parent: {...}, _name: "angular", ...   }   __proto : Object {...}

angular http

asked by Aurelio Fernandez 25.04.2018 в 12:33

source

1 answer

How to delete the last text or written number? How do I set an array as a parameter in JavaScript? [closed]

score 1 · Accepted Answer

You do not need to import HttpClientModule in the service, only HttpClient .

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';


@Injectable()
export class HttpServiceService {


  private ROOT_URL = 'https://...............';

  constructor(private http: HttpClient) {}

  getPosts() {
    return this.http.get('${this.ROOT_URL}');
  }


}

You also need to include the service in providers inside the decorator @NgModule in your AppModule :

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';
import { HttpServiceService } from /* Aqui pones donde se ubica el servicio */
import { WelcomerSelectHotelComponent } from './components/welcomer-select-hotel/welcomer-select-hotel.component';
import { AppRoutesModule } from './app-routes.module';


@NgModule({
  declarations: [
    AppComponent,
    WelcomerSelectHotelComponent
  ],
  imports: [
    BrowserModule,
    AppRoutesModule,
    HttpClientModule,
  ],
  providers: [HttpServiceService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Remember to put the route where the service is located.