Angular register provider at component level

When you register a provider at the component level, you get a new instance of the service with each new instance of that component. In this term, the service is a instance variable of a given component object that means the service is his dependency. The dependency can be injected into component by constructor injection

//with respect to the working example below
constructor( private service: HeroService ) { }

and is managed by Angular framework. In this context the line of constructor injection can be read as (pseudo code):

class Component {
    private Service service;
	constructor( Service service) { 
      this.service = service;
    }
}

That means if a component object is created, in our case an instance of class HeroList, then we inject(pass) our dependency(HeroService instance) to HeroList constructor (HeroList hl = new HeroList(new HeroService())).

Why code under point 2. does not fulfilled the representation/interpretation of the working example in point 1?

1)
hero.service.ts

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

@Injectable()
export class HeroService {
  constructor() { }
}

hero-list.component.ts

import { Component } from '@angular/core';
import { HeroService } from '../hero.service';

@Component({
  selector: 'app-hero-list',
  templateUrl: './hero-list.component.html',
  styleUrls: ['./hero-list.component.css'],
  providers: [ HeroService ]
})
export class HeroListComponent {
	constructor( private service: HeroService ) { }
}

2)
hero.service.ts

export class HeroService {
  constructor() { }
}

hero-list.component.ts

import { Component } from '@angular/core';
import { HeroService } from '../hero.service';

@Component({
  selector: 'app-hero-list',
  templateUrl: './hero-list.component.html',
  styleUrls: ['./hero-list.component.css'],
})
export class HeroListComponent {
	constructor( private service: HeroService ) { }
}

If I modify HeroListComponent class to:

export class HeroListComponent {
  private service: HeroService;	
  constructor( ) { 
    this.service = new HeroService();
  }
}

then you get also new instance of the service with each new instance of that component. And we fulfilled the composite pattern ("has-a" relationship between two objects) as well.

The difference

The first approach is a working approach and the second one is not.

The first approach

As you've explained exactly. You are providing a service (creating a new instance) on the component scope. Wich means this service instance could be used as a dependency in your component and all it's children.

The second approach

If this was on on purpose to use a typescript class as a service without the @Injectable decorator, it will not work this way. To make it work you need to provide the class where it's needed e.g. on your component scope with the help of the class provider object under the providers array like:

providers: [ {provide: HeroService, useClass: HeroService]

In angular application the injector object is responsible for creating a singletone instance of your service and provide it as a dependency in the constructor of your component. This object needs to know on which scope your service is avaliable (provided) to be able to do its job properly. Without this information you will get a compilation error.

When you have a class with the Injectable annotation, you are telling Angular to have that class registered as a service and can be provided through the application via dependency injection (DI).

The other one, is just a plain javascript class. When you try to use it via DI, you'll get well known error:

NullInjectorError: No provider for HeroService!

Look at console output in this demo

So the first approach is a valid service, the other one isn't.