Angular no provider for NameService

Question

I\'ve got a problem loading a class into an Angular component. I\'ve been trying to solve it for a long time; I\'ve even tried joining it all in a single file. What I have i

Answer 1

You should be injecting NameService inside providers array of your AppModule's NgModule metadata.

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

}

If you want to create an Dependency for particular component level without bothering about state of your application, then you can inject that dependency on component providers metadata option like accepted @Klass answer shown.

Answer 2

Add @Injectable to your service as:

export class NameService {
    names: Array<string>;

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

    getNames() {
        return this.names;
    }
}

and in your component add the providers as:

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

or if you want to access your service all over the application you can pass in app provider

Answer 3

Angular2 requires you to declare all the injectables in bootstrap function call. Without this your service is not an injectable object.

bootstrap(MyAppComponent,[NameService]);

Answer 4

Hi , You can use this in your .ts file :

first import your service in this .ts file:

import { Your_Service_Name } from './path_To_Your_Service_Name';

Then in the same file you can add providers: [Your_Service_Name] :

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

Answer 5

You need to add it to providers array, which includes all depency on your component.

Look at this section in angular documentation:

Registering providers in a component

Here's a revised HeroesComponent that registers the HeroService in its providers 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 { }

When to use NgModule versus an application component

On the one hand, a provider in an NgModule is registered in the root injector. That means that every provider registered within an NgModule will be accessible in the entire application.

On the other hand, a provider registered in an application component is available only on that component and all its children.

Here, the APP_CONFIG service needs to be available all across the application, so it's registered in the AppModule @NgModule providers array. But since the HeroService is only used within the Heroes feature area and nowhere else, it makes sense to register it in the HeroesComponent.

Also see "Should I add app-wide providers to the root AppModule or the root AppComponent?" in the NgModule FAQ.

So in your case, simply change injectables to providers like below:

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

Also in the new versions of Angular, @View and some other stuffs gone.

For more info ,visit here.

Answer 6

add your service to providers[] array in app.module.ts file. Like below

// here my service is CarService

app.module.ts

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

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