angular - “无提供者”错误(即使我添加了提供者)

Question

我正在尝试从特定类调用服务，但由于某种原因无法调用它，即使我能够在其他类中使用它。我正在使用 @Input。我不知道这是否导致了问题。

代码:

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());
  }

}  

应用程序模块.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 { }

我尝试调用的服务类(示例):

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());
  }

}

我也无法获取当前路线，使用:

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

...});

同样，上面的代码在其他类中运行良好，但在本类中却不行。

Answer 1

如果作为提供者提供了错误的东西，就会发生这种情况。并且不太可能还有其他原因。

在一处是...shared/service/cert.service，在另一处是...shared/Service/cert.service。案件很重要。这取决于环境在构建过程中这些模块会发生什么，但这可能会导致错误，例如它们可能会重复并引用不同的对象。

为了快速调试它，CertService 可以从两个文件中作为 window.CertService1 和 window.CertService2 公开，如果两者都存在，则在控制台中进行比较被定义且相等。