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

...});

同样，上面的代码在其他类中正常工作，但在此类中不起作用。

请给[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两个文件中公开，并在控制台中进行比较，如果两者都定义并相等。

你是绝对正确的。我有一个名为“Service”的文件，其大写字母为“S”，AppModule中的导入使用小写字母“s”。我手动导入服务不正确，或者它是我的IDE。 – ToDo

非常感谢提示。一开始并不相信，但经过一段时间发现，在不同情况下进口（人和人） – VorobeY1326

我发现这种情况下的问题发生时，我从我的存储库克隆我的项目。该文件夹始终以大写字母书写，我必须手动将其更改为小写。 – ToDo

答

完全相同的错误消息（“SomeService为”没有提供程序）可以通过在您的应用程序中使用另一个具有相同名称的服务来触发。因此，看起来您正确地将SomeService＃1包含在您的模块中，并添加到提供程序部分，但它仍然会导致错误。它让我困惑，直到我意识到SomeService＃2被导入到我的一个组件中。

答

就我而言，我进口服务为

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

在一个地方，并

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

在其他地方

，而index.ts相同，含有对服务的所有出口语句夹。

当我统一到导入的第二种形式后，问题就消失了。

Angular 2 - 没有提供程序错误（尽管我已经添加了提供程序）

相关推荐