Dependency Injection error Angular next with Webpack very simple example

Question

I have a very weird situation. When followed exactly to the official Angular documentation I got error in the application.

This constructor is not compatible with Angular Dependency Injection because its dependency at index 0 of the parameter list is invalid.
    This can happen if the dependency type is a primitive like a string or if an ancestor of this class is missing an Angular decorator.
​
    Please check that 1) the type for the parameter at index 0 is correct and 2) the correct Angular decorators are defined for this class and its ancestors.

Environment versions are following:

Angular: 13.0.0-rc.2
Angular CLI: 13.0.0-rc.2
Node: 16.12.0
Package Manager: yarn 1.22.15
OS: linux x64

@angular-devkit/architect       0.1300.0-rc.2
@angular-devkit/build-angular   13.0.0-rc.2
@angular-devkit/core            13.0.0-rc.2
@angular-devkit/schematics      13.0.0-rc.2
@schematics/angular             13.0.0-rc.2
rxjs                            7.4.0
typescript                      4.4.4
webpack                         5.60.0

original article: https://angular.io/tutorial/toh-pt4

service:

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

import { Observable, of } from 'rxjs';

import { Hero } from './hero';
import { HEROES } from './mock-heroes';

@Injectable({
  providedIn: 'root',
})

export class HeroService {

  constructor() { }

  getHeroes(): Observable<Hero[]> {
    const heroes = of(HEROES);
    return heroes;
  }
}

how I try to use it:

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

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

@Component({
  selector: 'app-heroes',
  template: require('./heroes.component.html')
})
export class HeroesComponent implements OnInit {

  sub_title = "List of Sems Heroes"
  heroes: Hero[] = []

  constructor(private heroService: HeroService) { }

  ngOnInit() {
    this.getHeroes();
  }

  getHeroes(): void {
    this.heroService.getHeroes()
        .subscribe(heroes => this.heroes = heroes);
  }
}

module file:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { APP_BASE_HREF } from '@angular/common';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeroesComponent } from './sheroes/compheroes/heroes.component';

@NgModule({
  declarations: [
    AppComponent,
    HeroesComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [{ provide: APP_BASE_HREF, useValue: '/' }],
  bootstrap: [AppComponent]
})
export class AppModule { }

the application crashes with the error mentioned above. It is confusing me because it's very simple code which shouldn't crash. Please, any help is appreciated.

PS. I do have emitDecoratorMetadata set to true in the tsconfig.json file

PS. none of the solutions discussed here worked for me: This constructor is not compatible with Angular Dependency Injection because its dependency at index 0 of the parameter list is invalid