title: Dependency Injection error Angular next with Webpack very simple example
body: <p>I have a very weird situation. When followed exactly to the official Angular documentation I got error in the application.</p>
  <pre><code>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.
  </code></pre>
  <p>Environment versions are following:</p>
  <pre><code>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
  </code></pre>
  <p>original article: <a href="https://angular.io/tutorial/toh-pt4" rel="nofollow noreferrer">https://angular.io/tutorial/toh-pt4</a></p>
  <p>service:</p>
  <pre><code>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&lt;Hero[]&gt; {
      const heroes = of(HEROES);
      return heroes;
    }
  }
  </code></pre>
  <p>how I try to use it:</p>
  <pre><code>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 = &quot;List of Sems Heroes&quot;
    heroes: Hero[] = []
  
    constructor(private heroService: HeroService) { }
  
    ngOnInit() {
      this.getHeroes();
    }
  
    getHeroes(): void {
      this.heroService.getHeroes()
          .subscribe(heroes =&gt; this.heroes = heroes);
    }
  }
  </code></pre>
  <p>module file:</p>
  <pre><code>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 { }
  </code></pre>
  <p>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.</p>
  <p>PS. I do have <code>emitDecoratorMetadata</code> set to <code>true</code> in the <code>tsconfig.json</code> file</p>
  <p>PS. none of the solutions discussed here worked for me: <a href="https://stackoverflow.com/questions/60149052/this-constructor-is-not-compatible-with-angular-dependency-injection-because-its">This constructor is not compatible with Angular Dependency Injection because its dependency at index 0 of the parameter list is invalid</a></p>