No provider' error (even though I've added a provider)

Question

I'm trying to call a service from a particular class, but for some reason it can't be called, even though I am able to use it in other classes. I'm using @Input. I don't know if this is causing the problem.

Code:

import { Component, Input, OnInit } from '@angular/core';

import { Category } from './../Category';
import { CertService } from './../../shared/Service/cert.service';

@Component({
  selector: 'app-cert-item',
  templateUrl: './cert-item.component.html'
})
export class CertItemComponent implements OnInit {

  @Input() category: Category;
  @Input() categoryId: number;
  constructor(
    private certService: CertService //Console error "No provider for CertService!"
  ) { }

  ngOnInit() {
    console.log(this.certService.getCategories());
  }

}  

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { routing } from './app.routing';
import { ReactiveFormsModule } from '@angular/forms';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

import { AppComponent } from './app.component';
import { HeaderComponent } from './shared/header.component';
import { DropdownDirective } from './dropdown.directive';
import { CertsComponent } from './certs/certs.component';
import { CertItemComponent } from './certs/cert-category/cert-item.component';

import { CertService } from './shared/service/cert.service';
import { HttpService } from './shared/Service/http.service';

import { LoginComponent } from './login/login.component';


@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    DropdownDirective,
    CertsComponent,
    CertItemComponent,
    LoginComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    routing,
    ReactiveFormsModule,
    NgbModule.forRoot()
  ],
  providers: [
    CertService, 
    HttpService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Service class I'm trying to call (sample):

import { Injectable } from '@angular/core';
import { Http, Response, Headers } from "@angular/http";
import { Observable } from "rxjs/Rx";
import 'rxjs/Rx';

@Injectable()
export class CertService {

  constructor(private http: Http) { }

  getCategories() {
    return this.http.get('api/categories')
   .map((response: Response) => response.json());
  }

}

I also can't get the current route, using:

this.subscription = this.route.params.subscribe(
      (params) => {...

...});

Again, the code above works fine in other classes but not in this class.

Answer 1

Exactly the same error message ("No provider for SomeService") can be triggered by having another service with the same name in your app. So it would look like you correctly included SomeService #1 in your module, added to the providers section, but it would still throw you the error. It puzzled me until I realized that there's SomeService #2 being imported in one of my components.

Answer 2

In my case, I imported the service as

import {MyService} from '../services/my.service'

in one place, and

import {MyService} from '../services/index'

in the other place, while index.ts contains all export statements for services in the same folder.

After I unified to the 2nd form of importing, the problem had gone.

Answer 3

In my case, I was using symbolic links with 'yarn link ' and didn't have the build option 'preserveSymlinks' set to true in angular.json file.

Details:

If you're using symbolic links, first make a sanity-check: unlink them, rebuild and see if the problem persists. If it does not, it means there's a problem with the angular build.

In that case, check your angular.json file and make sure you have the option 'preserveSymlinks' set to true:

"projects": {
"my-project": {
  "projectType": "application",
  [...]
  "architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "preserveSymlinks": true,