angular 2 Fehler kein Anbieter für "BillingService"

Question

nur eine Anwendung in Winkel 2 in ASP MVC-Kern. habe eine Komponente, ein Modul und einen Service erstellt. aber wenn sie aufgerufen wird, scheint es den folgenden Fehler zu erhöhen:

Error: Error in ./BillingComponent class BillingComponent_Host - inline template:0:0 caused by: No provider for BillingService 

die billing.component.ts Datei wird wie folgt:

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

import { BillingPackage } from './BillingPackage'; 
import { BillingService } from './Billing.Service'; 

@Component({ 
    templateUrl: 'app/Billing/billing.component.html' 
}) 
export class BillingComponent /* implements OnInit*/ { 
    pageTitle: string = 'Billing Options'; 
    listFilter: string; 
    errorMessage: string; 

    packages: BillingPackage[]; 

    constructor(private _billingService: BillingService) { 

    } 


    ngOnInit(): void { 
     debugger; 
     this._billingService.getPackages() 
      .subscribe(billing => this.packages = billing, 
      error => this.errorMessage = <any>error); 
    } 

} 

die Billing.service.ts sich wie folgt:

import { Injectable } from '@angular/core'; 
import { Http, Response } from '@angular/http'; 

import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/operator/do'; 
import 'rxjs/add/operator/catch'; 
import 'rxjs/add/operator/map'; 

import { BillingPackage } from './BillingPackage'; 

@Injectable() 
export class BillingService { 
    //private _companyUrl = 'api/companies/companies.json'; 
    private _billingUrl = 'api/BillingPackage.json'; 

    constructor(private _http: Http) { } 

    getPackages(): Observable<BillingPackage[]> { 
     return this._http.get(this._billingUrl) 
      .map((response: Response) => <BillingPackage[]>response.json()) 
      .do(data => console.log('All: ' + JSON.stringify(data))) 
      .catch(this.handleError); 
    } 

    getPackage(id: string): Observable<BillingPackage> { 
     return this.getPackages() 
      .map((billing: BillingPackage[]) => billing.find(p => p.Id == id)); 
    } 

    private handleError(error: Response) { 

     console.error(error); 
     return Observable.throw(error.json().error || 'Server error'); 
    } 
} 

und Billing.module.ts ist wie folgt:

import { NgModule } from '@angular/core'; 
import { RouterModule } from '@angular/router'; 

import { BillingComponent } from './billing.component'; 
import { BillingService } from './billing.service'; 
import { SharedModule } from '../shared/shared.module'; 

@NgModule({ 
    imports: [ 
     SharedModule, 
     RouterModule.forChild([ 
      { path: 'billpackages', component: BillingComponent }, 
     ]) 
    ], 
    declarations: [ 
     BillingComponent 
    ], 
    providers: [ 
     BillingService, 
    ] 
}) 
export class BillingModule { } 

die Billing.component.html Datei ist wie unter:

<div class="row" *ngIf="packages && packages.length"> 


    <div class="col-xs-12 col-sm-6 col-md-4" *ngFor="let package of packages"> 

     <div class='panel panel-info'> 
      <div class='panel-heading'> 
       {{package.Name}} 
      </div> 


      <div class='panel-body'> 

       <div class='has-error' *ngIf='errorMessage'>{{errorMessage}}</div> 

       <div class="row"> 
        <h2> <span class="label label-success"> {{package.AllowedUsersCount}}</span> Users</h2> 
       </div> 

       <div class="row"> 
        <h2> <span class="label label-info"> {{package.AllowedItemCount}}</span> Products</h2> 
       </div> 

       <div class="row"> 
        <h2> <span class="label label-warning"> {{package.AllowedTransactions}}</span> Transactions</h2> 
       </div> 

       <div class="row"> 
        <h2> <span class="label label-danger"> {{package.AllowedStoreCount}}</span> Stores</h2> 
       </div> 

       <div class="row"> 
        <h2> For <span class="label label-primary"> {{package.MonthlyCharges}}</span></h2> 
       </div> 

      </div> 
     </div> 

    </div> 

</div> 

jede Hilfe dankbar ..

Answer 1

Sie haben Anbieter hinzuzufügen: [BillingService]:

@Component({ 
    selector: 'billing', 
    templateUrl: 'app/Billing/billing.component.html', 
    providers: [ BillingService]  
}) 

es Hoffnung wird für dich arbeiten.

Answer 2

Überprüfen Sie jeden Verzeichnispfad, in der Fehlermeldung sagt: inline template:0:0, also wenn möglich, bitte HTML-Vorlage Code auch angeben.

Im Billing.module.ts Route für BillingComponent:

{ path: 'billpackages', component: BillingComponent }

sollte sein:

{ path: '', component: BillingComponent }

wenn Sie Pfad für Komponenten Eltern zuweisen