Angular 7 : Injected service is undefined Angular 7 : Injected service is undefined angular angular

Angular 7 : Injected service is undefined


The same thing happened to me, the solution was the one mentioned by the user span

-> Passing arrow function instead of regular function in the callback. Arrow functions don't have its own this.

Difference between regular functions and arrow functions here


You should always provide your service in the root injector unless there is a case where you want the service to be available only if the consumer imports a particular @NgModule.

try to add your service you want to inject in providers : [ ] in your core.module

import { NgModule, LOCALE_ID } from '@angular/core';import { DatePipe, registerLocaleData } from '@angular/common';import { HttpClientModule } from '@angular/common/http';import { Title } from '@angular/platform-browser';import locale from '@angular/common/locales/en';@NgModule({    imports: [HttpClientModule],    exports: [],    declarations: [],    providers: [        AccountService,        Title,        {            provide: LOCALE_ID,            useValue: 'en'        },        DatePipe    ]})export class CoreModule {    constructor() {        registerLocaleData(locale);    }}

and in your AccountService replace @Injectable({ providedIn: 'root' }) with @Injectable()

@Injectable()export class AccountService {    private userIdentity: any;    private authenticated = false;    private authenticationState = new Subject<any>();    constructor(private languageService: JhiLanguageService, private sessionStorage: SessionStorageService, private http: HttpClient) {}


HttpClientModule is required for HttpClient. Just import in AppModule.

import { BrowserModule } from '@angular/platform-browser';import { NgModule } from '@angular/core';import { AppRoutingModule } from './app-routing.module';import { AppComponent } from './app.component';import { CoreModule } from './core/core.module';import { HttpClientModule } from '@angular/common/http';import { MatTreeModule } from '@angular/material';import { FormsModule, ReactiveFormsModule } from '@angular/forms';import { BrowserAnimationsModule } from '@angular/platform-browser/animations';@NgModule({  declarations: [    AppComponent  ],  imports: [    BrowserModule,    BrowserAnimationsModule,    AppRoutingModule,    CoreModule,    MatTreeModule,    FormsModule,    ReactiveFormsModule,    HttpClientModule //add this as fix, simple  ],  providers: [],  bootstrap: [AppComponent]})export class AppModule { }