Solvedangular Uncaught Error: Can't resolve all parameters for ...

I'm submitting a...

[x] Bug report  

Current behavior

Getting an error in the browser console: "Uncaught Error: Can't resolve all parameters for ApiService "
Note: ApiService is, I guess, the name of my Service.

Expected behavior

Should inject HttpClient in my service, in developement mode and production mode

Minimal reproduction of the problem with instructions

Hi Guys..I've done a small angular-cli project. I've created 3 services that will get datas. One service is called "FakeService", because it will provide harcoded data...The other service is called "TestService", which has another service (ApiService) injected in its constructor. The ApiService will use HttpClient to get datas from server.

But I got the described error message when I'm using the FakeService (in developement mode)

Here is my app.module.ts

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

import { AppComponent } from './app.component';
import { ApiService } from './services/api.service';
import { TestService } from './services/test.service';
import { FakeService } from './services/fake.service';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [
    ApiService,
    {
      provide: TestService,
      useClass: environment.production ? TestService : FakeService
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Here is my api.service.ts

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

export class ApiService {
  constructor(private httpClient: HttpClient) {

  }
  get(path: string): Array<any> {
    switch (path) {
      case '/tests':
        // this.httpClient.get(`https://localhost/poneyRacerApi/races`)
        //   .subscribe((response: Array<IRaceModel>) => {
        //     return response;
        //   } );
        return [{name: 'London'}, {name: 'Montréal'}];
    }
    return [];
  }
}

Here is my fake.service.ts

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

@Injectable()
export class FakeService {
  constructor() {

  }

  list(): Array<any> {
    return [{name: 'London'}, {name: 'Lyon'}, {name: 'Paris'}, {name: 'Montréal'}];
  }
}

And Finally, here is my test.service.ts

import { Injectable } from '@angular/core';
import { ApiService } from './api.service';

@Injectable()
export class TestService {
  constructor(private apiService: ApiService) {

  }

  list() {
    console.log('Listing races');
    return this.apiService.get('/tests');
  }
}

As you can see in test.service.ts, I inject my other ApiService in the constructor.
As you can see in app.module.ts, I'm using TestService when I'm in production (for example, when calling ng serve --prod) and I'm using FakeService when not in production (ng serve)

I have no error message when calling ng serve --prod. But I have the following error message when serving in development mode, aka when using FakeService instead of TestService (ng serve)

Uncaught Error: Can't resolve all parameters for ApiService: (?).
    at syntaxError (compiler.es5.js:1694)
    at CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver._getDependenciesMetadata (compiler.es5.js:15925)
    at CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver._getTypeMetadata (compiler.es5.js:15793)
    at CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver._getInjectableMetadata (compiler.es5.js:15779)
    at CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver.getProviderMetadata (compiler.es5.js:16070)
    at compiler.es5.js:15999
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver._getProvidersMetadata (compiler.es5.js:15959)
    at CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver.getNgModuleMetadata (compiler.es5.js:15614)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._loadModules (compiler.es5.js:26958)

If I remove the constructor's parameter (private httpClient: HttpClient) in my ApiService, I have no error issue when running in developement mode (so when it uses FakeService) but I can't use httpClient to make Http requests.. I've followed the instructions as described in Angular HttpClient doc for the use of HttpClient.

I don't know If it's a true angular issue or if I've done something wrong.. Could you please help me with this issue ?

Thank you very much for your help.

Environment

Angular version:4.4.3

Browser:
- [X] Chrome (desktop) version 60.0.3112.113
 
For Tooling issues:
- Node version: 8.4.0
- Platform:  Windows

Others:
Visual Studio Code 1.16.1
Angular-Cli: 1.4.3
47 Answers

✔️Accepted Answer

You are missing an @Injectable() annotation on your ApiService. Support requests like these should live on StackOverflow not GitHub.

Other Answers:

After 1 day on this I realized I had removed some polyfills I didn't think I need.
This is what I was missing:

 import 'core-js/es7/reflect';

Any thoughts on adding actual useful error messages that detect common Angular pitfalls like Vue does?

@benelliott Thank you for the hint. I'm sorry but I thought it was an issue in angular. I've done a lot of research on StackOverflow and on Internet in general, but didn't find a solution.,..So I thought it was an angular issue...Closing it. Thank you and sorry again

After strugling for 1 hour on this, finally, thanks to @odolha , it appears I also had removed core-js/es7/reflect.
Adding it again solve the problem !

More Issues: