CODEWITHSUNDEEP
angulartypescript
keesjanbertus
keesjanbertus

Reputation: 402

Angular 7 TypeError: service.x is not a function

I made a routing service and want to inject it into my nav component. But when i call a method on it it throws TypeError: routingService.getRequestedPage is not a function. Yesterday I had a very similar problem with another service, unfortunately I forgot how I solved this. I generated the service it with the terminal.

src/app/nav/nav.component.ts constructor:

constructor(private templateService: TemplateService, private routingService: RoutingService) {
    this.getTemplates();
    if (this.routingService.getRequestedPage() === 'home') {
      this.showHome();
    }
  }

src/app/nav/nav.component.ts import:

import {RoutingService} from '../shared/routing.service';

src/app/shared/routing.service.ts:

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class RoutingService {

  private requestedPage: string;

  constructor() {
    this.requestedPage = 'home';
  }

  requestPage(page: string) {
    this.requestedPage = page;
  }

  getRequestedPage() {
    return this.requestedPage;
  }
}

Upvotes: 6

Views: 13641

Answers (3)

nirutha
nirutha

Reputation: 11

This problem can also be caused by creating a circular dependency. If service A is injected into service B, and service B is injected into service A, calling A.foo() from service B will cause the error "A.foo() is not a function". In fact, A will not be correctly instantiated and have no methods or properties.

Upvotes: 1

Omzig
Omzig

Reputation: 911

Oh boy, i was getting this error also... In my app.module.ts file i had a useFactory constructor order issue:

I get this error: core.js:6210 ERROR Error: Uncaught (in promise): TypeError: appConfig.get is not a function TypeError: appConfig.get is not a function

Fail:

useFactory:
                (
                    permissionService: NgxPermissionsService
                    appConfig: AppConfigService, //the order matters
                ) =>
                async () => {
const promise = await appConfig
                            .get()
                            .toPromise()
                            .then((x) => {
                                //console.log('app.module.ts: toPromise.then() Env:', x);
                                appConfig.setConfig(x);
                                return x;
                            }); //await toPromise causes the env to be updated before running the rest of the code
                        return promise;

Success:

useFactory:
                (
                    appConfig: AppConfigService, //the order matters
                    permissionService: NgxPermissionsService
                ) =>
                async () => {
const promise = await appConfig
                            .get()
                            .toPromise()
                            .then((x) => {
                                //console.log('app.module.ts: toPromise.then() Env:', x);
                                appConfig.setConfig(x);
                                return x;
                            }); //await toPromise causes the env to be updated before running the rest of the code
                        return promise;

Upvotes: 0

Matt
Matt

Reputation: 451

Instead of putting the providedIn part just put @Injectable() then in your app.module.ts file add the service under providers. Then when you write 

constructor(private whateverService: WhateverService) {
}
In any component you should have access without errors. I see you have it as private in the snippet but thats one that always trips me up so make sure its private when injecting into the constructor.

Upvotes: 8

Related Questions