Angular 2 - 沒有提供程序錯誤（儘管我已經添加了提供程序）

我試圖從特定的類調用服務，但由於某種原因它無法調用，即使我可以使用它在其他類中。我正在使用@Input。我不知道這是否會導致問題。Angular 2 - 沒有提供程序錯誤（儘管我已經添加了提供程序）

代碼：

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 { }

的服務類，我試圖調用（樣品）

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) => {... 

...});

同樣，上面的代碼在其他類中正常工作，但在此類中不起作用。

來源

2017-01-22 ToDo

請給[mcve]。該服務是否在相關的模塊級'providers'數組中？ – jonrsharpe

@jonrsharpe - 該服務位於app.module.ts文件中的相關'providers：[]'中。它被其他類使用，但不能在這個類中使用。我假設其他一切（除了這個課程）都是有效的，因爲我之前使用過它們沒有任何問題。另外，我使用Visual Studio Code，它不會給我任何錯誤，我可以自動導入服務。只有當我在瀏覽器中運行它時纔會出現錯誤 – ToDo

是在聲明組件的同一模塊中提供的服務？ –

如果提供者提供了錯誤，會發生這種情況。而且這不太可能有另一個原因。

在一個地方它是...shared/service/cert.service，在另一個地方是...shared/Service/cert.service。案件事宜。這取決於環境在構建過程中對這些模塊所發生的情況，但這可能會導致錯誤它們可能會變得重複並引用不同的對象。

要快速調試，CertService可以從window.CertService1和window.CertService2兩個文件中公開，並在控制檯中進行比較，如果兩者都定義並相等。

來源

2017-01-24 03:03:47 estus

你是絕對正確的。我有一個名爲「Service」的文件，其大寫字母爲「S」，AppModule中的導入使用小寫字母「s」。我手動導入服務不正確，或者它是我的IDE。 – ToDo

非常感謝提示。一開始並不相信，但經過一段時間發現，在不同情況下進口（人和人） – VorobeY1326

我發現這種情況下的問題發生時，我從我的存儲庫克隆我的項目。該文件夾始終以大寫字母書寫，我必須手動將其更改爲小寫。 – ToDo

完全相同的錯誤消息（「SomeService爲」沒有提供程序）可以通過在您的應用程序中使用另一個具有相同名稱的服務來觸發。因此，看起來您正確地將SomeService＃1包含在您的模塊中，並添加到提供程序部分，但它仍然會導致錯誤。它讓我困惑，直到我意識到SomeService＃2被導入到我的一個組件中。

來源

2017-04-11 03:30:30

就我而言，我進口服務爲

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

在一個地方，並

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

在其他地方

，而index.ts相同，含有對服務的所有出口語句夾。

當我統一到導入的第二種形式後，問題就消失了。

來源

2017-11-01 07:07:59 ZZZ

Angular 2 - 沒有提供程序錯誤（儘管我已經添加了提供程序）

回答

相關問題