Angular sin proveedor para NameService

Tengo un problema al cargar una clase en un componente angular. He estado tratando de resolverlo por mucho tiempo; Incluso he intentado unirlo todo en un solo archivo. Lo que tengo es:

Application.ts

/// <reference path="../typings/angular2/angular2.d.ts" />

import {Component,View,bootstrap,NgFor} from "angular2/angular2";
import {NameService} from "./services/NameService";

@Component({
    selector:'my-app',
    injectables: [NameService]
})
@View({
    template:'<h1>Hi {{name}}</h1>' +
    '<p>Friends</p>' +
    '<ul>' +
    '   <li *ng-for="#name of names">{{name}}</li>' +
    '</ul>',
    directives:[NgFor]
})

class MyAppComponent
{
    name:string;
    names:Array<string>;

    constructor(nameService:NameService)
    {
        this.name = 'Michal';
        this.names = nameService.getNames();
    }
}
bootstrap(MyAppComponent);

servicios / NameService.ts

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

Sigo recibiendo un mensaje de error que dice No provider for NameService.

¿Alguien puede ayudarme a detectar el problema con mi código?

Tienes que usar en providerslugar deinjectables

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

Ejemplo de código completo aquí .

En Angular 2 hay tres lugares donde puede "proporcionar" servicios:

1. oreja
2. componente raíz
3. otros componentes o directivas

"La opción del proveedor de bootstrap está diseñada para configurar y anular los servicios prerregistrados de Angular, como su soporte de enrutamiento". - referencia

Si solo desea una instancia de NameService en toda su aplicación (es decir, Singleton), inclúyala en la providersmatriz de su componente raíz:

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

Plunker

Si prefiere tener una instancia por componente, use la providersmatriz en el objeto de configuración del componente:

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

Consulte el documento de Inyectores jerárquicos para obtener más información.

A partir de Angular 2 Beta:

Agregar @Injectablea su servicio como:

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

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

    getNames() {
        return this.names;
    }
}

y a la configuración de su componente agregue el providerscomo:

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

Usted debe a inyectar NameServicedentro de providersgama de su AppModule's NgModulemetadatos.

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

}

Si desea crear una dependencia para un nivel de componente particular sin preocuparse por el estado de su aplicación, puede inyectar esa dependencia en la providersopción de metadatos del componente como se muestra en la respuesta @Klass aceptada .

Sorprendentemente, la sintaxis ha cambiado una vez más en la última versión de Angular :-) De los documentos de Angular 6 :

A partir de Angular 6.0, la forma preferida de crear un servicio singleton es especificar en el servicio que se debe proporcionar en la raíz de la aplicación. Esto se hace estableciendo provideIn en root en el decorador @Injectable del servicio:

src / app / user.service.0.ts

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

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

Debería inyectar NameService dentro de la matriz de proveedores de los metadatos NgModule de su AppModule.

@NgModule({
   providers: [MyService]
})

y asegúrese de importar en su componente por el mismo nombre (distingue entre mayúsculas y minúsculas), porque SystemJs distingue entre mayúsculas y minúsculas (por diseño). Si usa un nombre de ruta diferente en sus archivos de proyecto de esta manera:

main.module.ts

import { MyService } from './MyService';

your-component.ts

import { MyService } from './Myservice';

entonces el sistema js hará importaciones dobles

En Angular v2 y hasta ahora es:

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

Angular 2 ha cambiado, así es como debería verse la parte superior de su código:

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

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

Además, es posible que desee utilizar getters y setters en su servicio:

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

Luego, en su aplicación, simplemente puede hacer:

this.names = nameService.names;

Le sugiero que vaya a plnkr.co y cree un nuevo plunk Angular 2 (ES6) y que primero funcione allí. Configurará todo para ti. Una vez que esté funcionando allí, cópielo en su otro entorno y clasifique cualquier problema con ese entorno.

El error No provider for NameServicees un problema común que enfrentan muchos principiantes de Angular2.

Motivo : antes de utilizar cualquier servicio personalizado, primero debe registrarlo en NgModule agregándolo a la lista de proveedores:

Solución:

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

También podría tener las dependencias declaradas en el comando bootstrap como:

bootstrap(MyAppComponent,[NameService]);

Al menos eso es lo que funcionó para mí en alpha40.

este es el enlace: http://www.syntaxsuccess.com/viewarticle/dependency-injection-in-angular-2.0

Hola, puedes usar esto en tu archivo .ts:

Primero importe su servicio en este archivo .ts:

import { Your_Service_Name } from './path_To_Your_Service_Name';

Luego, en el mismo archivo, puede agregar providers: [Your_Service_Name]:

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

Agréguelo a proveedores no inyectables

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

En Angular puede registrar un servicio de dos maneras:

1. Registre un servicio en el módulo o componente raíz

Efectos:

• Disponible en todos los componentes
• Disponible en aplicación de por vida

Debe tener cuidado si registra un servicio en un módulo con carga lenta:

• El servicio solo está disponible en componentes declarados en ese módulo

• El servicio estará disponible en la aplicación de por vida solo cuando se cargue el módulo

2. Registre un servicio en cualquier otro componente de la aplicación.

Efectos:

• Se inyectará una instancia separada del Servicio en el componente

Debe tener cuidado si registra un servicio en cualquier otro componente de la aplicación

• La instancia del servicio inyectado estará disponible solo en el componente y todos sus elementos secundarios.

• La instancia estará disponible en la vida útil del componente.

Debe agregarlo a la matriz de proveedores, que incluye toda la dependencia de su componente.

Mire esta sección en la documentación angular:

Registrar proveedores en un componente

Aquí hay un HeroesComponent revisado que registra HeroService en su matriz de proveedores.

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

Cuándo usar NgModule versus un componente de aplicación

Por un lado, un proveedor en un NgModule está registrado en el inyector raíz. Eso significa que todos los proveedores registrados dentro de un NgModule serán accesibles en toda la aplicación.

Por otro lado, un proveedor registrado en un componente de aplicación está disponible solo en ese componente y todos sus hijos.

Aquí, el servicio APP_CONFIG debe estar disponible en toda la aplicación, por lo que está registrado en la matriz de proveedores AppModule @NgModule. Pero dado que HeroService solo se usa dentro del área de características de Héroes y en ningún otro lugar, tiene sentido registrarlo en el Componente de Héroes.

Consulte también "¿Debo agregar proveedores de toda la aplicación al AppModule raíz o al AppComponent raíz?" en las preguntas frecuentes de NgModule.

Entonces, en su caso, simplemente cambie los inyectables a proveedores como a continuación:

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

También en las nuevas versiones de Angular, @View y algunas otras cosas desaparecidas.

Para más información, visite aquí .

agregue su servicio a la matriz de proveedores [] en el archivo app.module.ts. Como abajo

// aquí mi servicio es CarService

app.module.ts

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

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

Angular2 requiere que declare todos los inyectables en la llamada de función bootstrap. Sin esto, su servicio no es un objeto inyectable.

bootstrap(MyAppComponent,[NameService]);

Agregue @Injectable a su servicio como:

export class NameService {
    names: Array<string>;

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

    getNames() {
        return this.names;
    }
}

y en su componente agregue los proveedores como:

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

o si desea acceder a su servicio en toda la aplicación, puede pasar al proveedor

Blockquote

Registrar proveedores en un componente

Aquí hay un HeroesComponent revisado que registra HeroService en su matriz de proveedores.

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

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

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