Angular 4没有服务提供者答案

【问题标题】：Angular 4 no Provider for ServiceAngular 4没有服务提供者
【发布时间】：2017-08-28 06:16:23
【问题描述】：

我正在尝试创建一个角度应用程序，并尝试在组件中使用服务，

我的服务：DetailsTabAPiService

@Injectable()
export class DetailsTabAPiService {

    constructor(private _http: Http) { }

    private _url: string = AppSettings.URI + "/api/maintenance/Countries";

    fetchCountry(): Observable<ICountries> {
        console.log('contry 3');

        return this._http.get(this._url)
            .map((resp: Response) => resp.json())
            .catch(this.handleErrors);
    }


    handleErrors(error: any, caught: Observable<any[]>): Observable<ICountries[]> {
        console.error(error);
        return Observable.throw(error.json().error || 'Server error') as Observable<ICountries[]>;
    }

}

我的控制器：DetailTabsComponent

import { MaintPlantApiService } from '../../services/plants-api.service';
import { MaintProgramApiService } from '../../services/programs-api.service';
import { DetailsTabAPiService } from '../../services/detailstab-api.service';
import { IPlants } from '../../models/plants.model';
import { ICountries } from '../../models/Countries.model';
@Component({
    selector: 'ppa-detailtabs',
    templateUrl: './detailtabs.Component.html',
    providers: [MaintProgramApiService, MaintPlantApiService, DetailsTabAPiService],
    styleUrls: ['./tabs.css'],

})

export class DetailTabsComponent {

    @Input() myplantid: number = 0;
    plant: IPlants;
    country: ICountries;
    isSuccess: boolean = false;
    _plantId: number = 0;
    public allowCustom: boolean = true;
    public allCountries = [];
    constructor(private zone: NgZone, private _router: Router, private DetailsApiServ: DetailsTabAPiService, private ProgramsApiSvrc: MaintProgramApiService,
        private plantApiSrv: MaintPlantApiService, private activatedRoute: ActivatedRoute) {

    }

    ngOnInit() {
        console.log('contry 1');
        this.fetchCountryList();

        this.activatedRoute.params.subscribe((params: Params) => {
            //alert('params received: ' + params['Id']);
            let plantId = params['Id'];
            this.plantApiSrv.getDataById(plantId)
                .subscribe((callbackData) => {
                    this.plant = callbackData;
                });
        });

    }
    ModifyPlantDetails(_data: IPlants): void {

        this.plantApiSrv.update(_data.Id, _data)
            //.subscribe(result => this.plant = result, error => this.isSuccess = false);
            .subscribe(result => {
            this.plant = result; this.isSuccess = true;
            },
            error => { this.isSuccess = false });   

    }


    fetchCountryList(): void {
        console.log('contry 2');

        this.DetailsApiServ.fetchCountry()
            .subscribe(result => {
                this.country = result;
                console.log(this.country);
            },
            error => { this.isSuccess = false });  
    }
}

As per the documentation, I am supped to put the service on the provider list, which I have done, but still while using it gives me the error.

我应该从该服务中获取国家/地区列表。所以我已经导入服务，然后放入构造函数，然后尝试使用它。

但是，尽管按照文档做了所有事情，即使我是，也给我错误“没有服务提供者” 将服务包含在我的提供程序中。

根据我的理解，这些应该是让这个东西工作的步骤。但不知何故，它不起作用。请帮忙。我确定我在这里遗漏了一些东西。但我不确定是什么。

【问题讨论】：

您是否尝试在您的应用主模块 - app.module.ts 的提供程序数组中添加这些服务？
控制台显示的错误是什么？你能用那个更新问题吗？

标签： angular angular2-services

【解决方案1】：

确保添加所有需要的导入 - 通常，IDE 会自动处理它。
仔细检查所有服务路径 - 注意点，如果 IDE 没有自动完成。
尝试将您的服务推送到app.module.ts，而不是将其添加到组件提供程序，具体如下：providers: [AddYourServicesHere]。

【讨论】：

【解决方案2】：

确保你导入{ ServiceName } from " ./WhereverServiceIs" ;

并确保您的Providers Array 也位于正确的位置。

【讨论】：

【解决方案3】：

刚刚在导入时遇到了与绝对路径相同的错误。应该改变

import { ExcelExportLogService } from 'app/admin/excel-export-logs/excel-export-log.service';

到

import { ExcelExportLogService } from './excel-export-log.service';

误导性错误信息

【讨论】：