title: Uncaught Error: Can't resolve all parameters for EventsComponent (Angular)
body: <p>Can anyone figure out why my EventService can't be injected into my EventsComponent? 
  I get this error in the chrome console:
  <code>Uncaught Error: Can't resolve all parameters for EventsComponent: (?, ?).</code></p>
  
  <p><a href="https://github.com/andrelin/ng-fundamentals" rel="nofollow noreferrer">https://github.com/andrelin/ng-fundamentals</a></p>
  
  <p>I have tried googling this, and looked at several different answers here on StackOverflow, but everything seems to be correct. Some suggest there might be a circular dependency somewhere in the project, but I really can not find any circular dependency. Does anyone have a suggestion for this?</p>
  
  <p>My (simplified) AppModule:</p>
  
  <pre><code>import { EventService } from './events/services/event.service';
  import { AppRoutingModule } from './app-routing.module';
  import { AppComponent } from './app.component';
  import { EventsComponent } from './events/events.component';
  
  @NgModule({
    declarations: [AppComponent, EventsComponent],
    imports: [BrowserModule, AppRoutingModule],
    providers: [EventService],
    bootstrap: [AppComponent]
  })
  export class AppModule {}
  </code></pre>
  
  <p>My EventComponent:</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { EventService } from './services/event.service';
  
  @Component({
    selector: 'app-events',
    templateUrl: './events.component.html',
    styleUrls: ['./events.component.css']
  })
  export class EventsComponent implements OnInit {
    events: any[];
  
    constructor(private eventService: EventService) {}
  
    ngOnInit() {
      this.events = this.eventService.getEvents();
    }
  }
  </code></pre>
  
  <p>My EventService</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  
  @Injectable({
    providedIn: 'root'
  })
  export class EventService {
    constructor() {}
  
    getEvents() {
      return EVENTS;
    }
  }
  </code></pre>
  
  <p>Sample Events array</p>
  
  <pre><code>const EVENTS = [
    {
      id: 1,
      name: 'Angular Connect',
      date: '9/26/2020',
      time: '8:00 am',
      price: 599.99,
      imageUrl: '/assets/images/angualrconnect-shield.png',
      location: {
        address: '1057 DT',
        city: 'London',
        country: 'England'
      }
    },
    {
      id: 2,
      name: 'Angular Netherlands',
      date: '10/10/2021',
      time: '10:00 am',
      price: 60,
      imageUrl: '/assets/images/ng-nl.png',
      location: {
        address: 'A very long address just to make this two lines!',
        city: 'Amsterdam',
        country: 'Netherlands'
      }
    }
  ];
  </code></pre>