Angular kein Anbieter für NameService

In Angular 2 gibt es drei Stellen, an denen Sie Dienste "bereitstellen" können:

1. bootstrap
2. wurzelkomponente
3. andere Komponenten oder Richtlinien

"Die Bootstrap-Provider-Option dient zum Konfigurieren und Überschreiben der von Angular vorregistrierten Dienste, z. B. der Routing-Unterstützung." - Referenz

Wenn Sie nur eine Instanz von NameService für Ihre gesamte App (d. H. Singleton) möchten, fügen Sie diese in das Array providers Ihrer Root-Komponente ein:

@Component({
   providers: [NameService],
   ...
)}
export class AppComponent { ... }

Plunker

Wenn Sie lieber eine Instanz pro Komponente haben möchten, verwenden Sie stattdessen das Array providers im Konfigurationsobjekt der Komponente:

@Component({
   providers: [NameService],
   ...
)}
export class SomeOtherComponentOrDirective { ... }

Weitere Informationen finden Sie im Dokument Hierarchical Injectors .

Ab Angular 2 Beta:

Hinzufügen @Injectable zu Ihren Diensten als:

@Injectable()
export class NameService {
    names: Array<string>;

    constructor() {
        this.names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"];
    }

    getNames() {
        return this.names;
    }
}

und zu deiner Komponente config das hinzufügen providers wie:

@Component({
    selector: 'my-app',
    providers: [NameService]
})

Sie sollten NameService in das providers-Array der AppModule-Metadaten NgModule einfügen.

@NgModule({
   imports: [BrowserModule, ...],
   declarations: [...],
   bootstrap: [AppComponent],
   //inject providers below if you want single instance to be share amongst app
   providers: [MyService]
})
export class AppModule {

}

Wenn Sie eine Abhängigkeit für eine bestimmte Komponentenebene erstellen möchten, ohne sich um den Status Ihrer Anwendung zu kümmern, können Sie diese Abhängigkeit von der providers-Metadatenoption der Komponente einfügen, wie "akzeptierte @Klass answer".

In Angular v2 und höher ist es jetzt:

@Component({ selector:'my-app', providers: [NameService], template: ... })

Sie sollten NameService in das Provider-Array der NgModule-Metadaten Ihrer AppModule einfügen.

@NgModule({
   providers: [MyService]
})

stellen Sie sicher, dass Sie Ihre Komponente mit demselben Namen importieren (Groß- und Kleinschreibung beachten), da bei SystemJs die Groß- und Kleinschreibung beachtet wird (von Entwurf). Wenn Sie in Ihren Projektdateien einen anderen Pfadnamen wie folgt verwenden:

main.module.ts

import { MyService } from './MyService';

ihre-Komponente.ts

import { MyService } from './Myservice';

dann macht System js doppelte Importe 

Angular 2 hat sich geändert, so sollte die Oberseite Ihres Codes aussehen:

import {
  ComponentAnnotation as Component,
  ViewAnnotation as View, bootstrap
} from 'angular2/angular2';
import {NameService} from "./services/NameService";

@Component({
  selector: 'app',
  appInjector: [NameService]
})

Möglicherweise möchten Sie auch Getter und Setter in Ihrem Dienst verwenden:

export class NameService {
    _names: Array<string>;
    constructor() {
        this._names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"];
    }
    get names() {
        return this._names;
    }
}

Dann können Sie in Ihrer App einfach Folgendes tun:

this.names = nameService.names;

Ich schlage vor, Sie gehen zu plnkr.co und erstellen einen neuen Angular 2 (ES6) -Plunk. Es wird alles für Sie einrichten. Wenn es dort funktioniert, kopieren Sie es in Ihre andere Umgebung und ordnen Sie alle Probleme mit dieser Umgebung.

Der Fehler No provider for NameService ist ein häufiges Problem, mit dem viele Angular2-Anfänger konfrontiert sind. 

Grund : Bevor Sie einen benutzerdefinierten Dienst verwenden, müssen Sie ihn zunächst bei NgModule registrieren, indem Sie ihn der Anbieterliste hinzufügen:

Lösung:

@NgModule({
    imports: [...],
    providers: [CustomServiceName]
})

Erschreckend hat sich die Syntax in der neuesten Version von Angular noch einmal geändert :-) Von der Angular 6 docs

Beginnend mit Angular 6.0 ist die bevorzugte Methode zum Erstellen eines Singleton services gibt an, dass der Dienst in .__ bereitgestellt werden soll. die Anwendungswurzel. Dies wird durch Festlegen von providedIn auf root auf .__ erreicht. der @Injectable-Dekorateur des Dienstes:

src/app/user.service.0.ts

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class UserService {
}

Sie könnten die Abhängigkeiten auch im Bootstrap-Befehl deklarieren lassen:

bootstrap(MyAppComponent,[NameService]);

Zumindest hat das in alpha40 für mich funktioniert.

dies ist der Link: http://www.syntaxsuccess.com/viewarticle/dependency-injection-in-angular-2.0

Fügen Sie es zu provider not injectables hinzu 

@Component({
    selector:'my-app',
    providers: [NameService]
})

Hallo, Sie können dies in Ihrer .ts-Datei verwenden:

importieren Sie zuerst Ihren Dienst in dieser .ts-Datei: 

import { Your_Service_Name } from './path_To_Your_Service_Name';

Dann können Sie in derselben Datei providers: [Your_Service_Name] hinzufügen:

 @Component({
      selector: 'my-app',
      providers: [Your_Service_Name],
      template: `
        <h1>Hello World</h1> `   
    })

Sie müssen es dem Provider-Array hinzufügen, das alle Abhängigkeit von Ihrer Komponente beinhaltet.

Sehen Sie sich diesen Abschnitt in der Winkeldokumentation an:

Anbieter in einer Komponente registrieren

Hier ist eine überarbeitete HeroesComponent, die den HeroService in seiner .__ registriert. Anbieter-Array.

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

import { HeroService } from './hero.service';

@Component({
  selector: 'my-heroes',
  providers: [HeroService],
  template: `
  <h2>Heroes</h2>
  <hero-list></hero-list>
  `
})
export class HeroesComponent { }

Wann wird NgModule gegenüber einer Anwendungskomponente verwendet?

Zum einen wird ein Provider in einem NgModule im Stammverzeichnis .__ registriert. Injektor. Das bedeutet, dass jeder Anbieter in einem NgModule .__ registriert ist. wird in der gesamten Anwendung zugänglich sein.

Andererseits ist ein Anbieter in einer Anwendungskomponente registriert ist nur für diese Komponente und alle ihre untergeordneten Elemente verfügbar.

Hier muss der APP_CONFIG-Dienst überall in der .__ verfügbar sein. Anwendung, so ist es in den AppModule @NgModule-Providern .__ registriert. Array. Da aber der HeroService nur innerhalb der Helden verwendet wird Feature-Bereich und nirgendwo sonst ist es sinnvoll, es in der .__ zu registrieren. HeroesComponent.

Siehe auch "Soll ich App-Provider dem Root-AppModule oder der Root-AppComponent hinzufügen?" in den NgModule FAQ.

In Ihrem Fall müssen Sie einfach injizierbare Produkte wie folgt in Provider umwandeln:

@Component({
  selector: 'my-app',
  providers: [NameService]
})

Auch in den neuen Versionen von Angular, @View und einigen anderen Sachen ist es vorbei.

Für weitere Informationen besuchen Sie hier . 

fügen Sie Ihren Dienst dem Array provider [] in der Datei app.module.ts hinzu 

// hier ist mein Service CarService

app.module.ts

import {CarsService} from './cars.service';

providers: [CarsService] // you can include as many services you have 

Fügen Sie @Injectable zu Ihrem Dienst hinzu als:

export class NameService {
    names: Array<string>;

    constructor() {
        this.names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"];
    }

    getNames() {
        return this.names;
    }
}

und fügen Sie in Ihrer Komponente die Anbieter hinzu:

@Component({
    selector: 'my-app',
    providers: [NameService]
})

oder wenn Sie auf Ihren Dienst in der gesamten Anwendung zugreifen möchten, können Sie den App-Anbieter übergeben

Für Angular2 müssen Sie alle injizierbaren Elemente beim Aufruf der Bootstrap-Funktion deklarieren. Ohne diesen ist Ihr Service kein injizierbares Objekt.

bootstrap(MyAppComponent,[NameService]);

Blockquote

Anbieter in einer Komponente registrieren

Hier ist eine überarbeitete HeroesComponent, die den HeroService in seinem Provider-Array registriert.

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

import { HeroService } from './hero.service';

@Component({
  selector: 'my-heroes',
  providers: [HeroService],
  template: `
  `
})
export class HeroesComponent { }

In Angular können Sie einen Dienst auf zwei Arten registrieren:

1. Registrieren eines Dienstes im Modul oder in der Root-Komponente

Auswirkungen:

• Verfügbar in allen Komponenten
• Verfügbar für lebenslange Anwendung

Sie sollten vorsichtig sein, wenn Sie einen Dienst in einem Lazy-Loading-Modul registrieren:

• Der Service ist nur für Komponenten verfügbar, die in diesem Modul deklariert sind

• Der Dienst ist nur dann verfügbar, wenn das Modul geladen ist

2. Registrieren eines Dienstes in einer anderen Anwendungskomponente

Auswirkungen:

• Es wird eine separate Instanz des Dienstes in die Komponente eingefügt

Sie sollten vorsichtig sein, wenn Sie einen Dienst in einer anderen Anwendungskomponente registrieren.

• Die Instanz des injizierten Dienstes ist nur für die Komponente und alle ihre untergeordneten Objekte verfügbar.

• Die Instanz ist für die Lebensdauer der Komponente verfügbar.