CODEWITHSUNDEEP
angulartypescriptangular7
SkyWalker
SkyWalker

Reputation: 14309

How to solve the ERROR TypeError: xxx is not a function?

I have a service that returns Promise<???> for all functions (btw is that a good practice?) e.g. 

@Injectable()
export abstract class MyService {
  abstract getCategories(): Promise<Category[]>;
}

I have two impl, one local for testing in isolation and another remote for when deployed.

@Injectable({
  providedIn: 'root'
})
export class MyServiceLocalImpl implements MyService {
  getCategories(): Promise<Category[]> {
    return Promise.resolve(this.data.categories);
  }
}

Now when I inject the service into a component I can't get hold of the Promise value as I get a runtime error:

import {MyService} from "../services";

@Component({
  selector: 'some-component',
  templateUrl: './some-component.component.html',
  styleUrls: ['./some-component.component.scss']
})
export class SomeComponent implements OnInit {
  private service: MyService;

  private categories: Category[];

  constructor(service: MyService) {
    this.service = service;
  }  

  ngOnInit() {
    this.service.getCategories().then( categories => {
      this.categories = categories;
    });
  }  
}

Runtime error:

ERROR TypeError: this.service.getCategories is not a function

UPDATE this is my app.module.ts

@NgModule({
  declarations: [
    AppComponent,
    SomeComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    HttpClientXsrfModule.withOptions({
      cookieName: 'Csrf-Token',
      headerName: 'Csrf-Token',
    }),
    BootstrapModule,
    FormsModule,
    BrowserAnimationsModule
  ],
  providers: [
    AppService,
    {
      multi: true,
      provide: HTTP_INTERCEPTORS,
      useClass: AppHttpInterceptorService
    },
    {
      multi: true,
      provide: MyService,
      useClass: MyServiceLocalImpl
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

Upvotes: 0

Views: 987

Answers (1)

JB Nizet
JB Nizet

Reputation: 691735

multi: true means that the "service" associated to the token is actually an array of service implementations.

Take the HTTP_INTERCEPTORS token, for example: it's used to reference all the HTTP interceptors. The http service gets all the interceptors as an array from the injector and calls them one after the other.

Upvotes: 2

Related Questions