Why is my service undefined?

Question

I am trying to inject a service into one of my classes but I am not able to use it as it is 'undefined'.

symbolPicker.ts

import {EditorService} from './editor.service';

import * as QuillNamespace from 'quill';
let Quill: any = QuillNamespace;
const Keyboard = Quill.import('modules/keyboard');

export interface Config {
  container: string;
  selector: 'equals'|'implies'|'followsFrom';
}

export interface QuillInstance {
  on: Function;
  getText: Function;
}

export default class SymbolPicker {
  quill: QuillInstance;
  options: Config;

  constructor(quill, options, private editorService: EditorService) {
    this.quill = quill;
    this.options = options;

    const container = document.querySelector(this.options.container);

    switch (this.options.selector) {
      case 'equals': {
        container.addEventListener('click', function() {
          console.log('FRANK: EQUALS PRESSED');
          quill.insertText(quill.getSelection(), '=            〈  〉');
          console.log('EDITOR SERVICE: ' + this.editorService);
          this.editorService.toggleHideSymbols();
        });
        break;
      }
      case 'implies': {
        container.addEventListener('click', function() {
          console.log('FRANK: IMPLIES PRESSED');
          quill.insertText(quill.getSelection(), '=>            〈  〉');
          this.editorService.toggleHideSymbols();
        });
        break;
      }
      default: {
        console.log('FRANK: selectionChoice set to non-understood value (' + this.options.selector + ')');
        container.addEventListener('click', function() {
          quill.insertText(quill.getSelection(), '\nINVALID STRING');
          this.editorService.toggleHideSymbols();
        });
        break;
      }
    }
  }
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

import { AppComponent } from './app.component';

import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { AngularFireAuthModule } from 'angularfire2/auth';

import { FooterComponent } from './footer/footer.component';

import { environment } from './../environments/environment';
import { BibleComponent } from './components/bible/bible.component';
import {BibleService} from './components/bible/bible.service';
import { ScrollableDirective } from './directives/scrollable.directive';
import { NavbarComponent } from './components/navbar/navbar.component';
import { BibleFilterPipe } from './pipes/bible-filter.pipe';

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/do';
import { TheoremsListComponent } from './components/theorems-list/theorems-list.component';
import { EditorComponent } from './components/editor/editor.component';
import {RouterModule} from '@angular/router';
import {routerConfig} from './router.config';
import { AboutComponent } from './components/about/about.component';
import { HomeComponent } from './components/home/home.component';
import { AboutUserComponent } from './components/about-user/about-user.component';

import { QuillModule } from 'ngx-quill';
import { AutocompleteBoxComponent } from './components/autocomplete-box/autocomplete-box.component';
import { SymbolPickerComponent } from './components/symbol-picker/symbol-picker.component';
import {SymbolPickerService} from './components/symbol-picker/symbol-picker.service';
import { EditorFormComponent } from './components/editor-form/editor-form.component';
import {EditorService} from './components/editor/editor.service';
import {SymbolPicker} from './components/editor/symbolPicker';

@NgModule({
  declarations: [
    AppComponent,
    BibleComponent,
    FooterComponent,
    ScrollableDirective,
    NavbarComponent,
    BibleFilterPipe,
    TheoremsListComponent,
    EditorComponent,
    AboutComponent,
    HomeComponent,
    AboutUserComponent,
    AutocompleteBoxComponent,
    SymbolPickerComponent,
    EditorFormComponent
  ],
  entryComponents: [ // Components that are added dynamically to page
    EditorComponent,
    AutocompleteBoxComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireDatabaseModule,
    AngularFireAuthModule,
    NgbModule.forRoot(),
    ReactiveFormsModule,
    QuillModule,
    RouterModule.forRoot(routerConfig)
  ],
  providers: [BibleService, SymbolPickerService, EditorService, SymbolPicker],
  bootstrap: [AppComponent, BibleComponent, FooterComponent, NavbarComponent,
    EditorComponent, HomeComponent, AboutComponent, AboutUserComponent]
})
export class AppModule { }

I am initializing my editorService in my constructor (of my SymbolPicker class) and I import the service at the top of the file but when I print out the service or try to use it, it returns undefined. Any ideas on why?

Possible duplicate of [How to inject Service into class(not component)](https://stackoverflow.com/questions/41432388/how-to-inject-service-into-classnot-component) — ConnorsFan, Mar 13 '18 at 00:09
I get this error when I add my class to providers in my app.modules: compiler.js:485 Uncaught Error: Encountered undefined provider! Usually this means you have a circular dependencies (might be caused by using 'barrel' index.ts files. — FrankTheTank, Mar 13 '18 at 00:14
@FrankTheTank then you need to remove circular dependencies. Could you post your module configs? — yeh, Mar 13 '18 at 00:18
May be you are looking for this https://stackoverflow.com/questions/41432388/how-to-inject-service-into-class-not-component — GSSwain, Mar 13 '18 at 00:47

score 0 · Answer 1 · edited Apr 05 '18 at 17:25

0

You are using

this.editorService.toggleHideSymbols();

this one. replace this with..

this.editorService.toggleHideSymbols().subscribe();

and check console with

this.editorService.toggleHideSymbols(data => {
   console.log(data);
});

edited Apr 05 '18 at 17:25

msanford

11,803
11
66
93

answered Apr 05 '18 at 17:13

Sathish kumar Ramalingam

267
4
8

Why is my service undefined?

1 Answers1