jmcooper / angular-fundamentals-files

353 stars 536 forks source link

Uncaught Error: Can't resolve all parameters for EventsListComponent: (?). #12

Closed prasanna-radha closed 4 years ago

prasanna-radha commented 4 years ago

I am able to successfully compile the code in VS Code but I am getting this strange error in the browser console. Any suggestion? Am I missing anything here?

compiler.js:2193 Uncaught Error: Can't resolve all parameters for EventsListComponent: (?). at syntaxError (compiler.js:2193) at CompileMetadataResolver._getDependenciesMetadata (compiler.js:17643) at CompileMetadataResolver._getTypeMetadata (compiler.js:17539) at CompileMetadataResolver.getNonNormalizedDirectiveMetadata (compiler.js:17168) at CompileMetadataResolver.loadDirectiveMetadata (compiler.js:17031) at compiler.js:24236 at Array.forEach () at compiler.js:24235 at Array.forEach () at JitCompiler._loadModules (compiler.js:24232)

You can consider the EVENTS has some hardcoded values in it.

event.service.ts:

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

@Injectable()
export class EventService {
  getEvents() {
    // tslint:disable-next-line: no-use-before-declare
    return EVENTS;
  }
}

events-list.component.ts

import { Component, OnInit } from "@angular/core";
import { EventService } from "./shared/event.service";

@Component({
  selector: "events-list",
  template: `
    <div>
      <h1>Upcoming Angular Events</h1>
      <hr />
      <div class="row">
        <div *ngFor="let event of events" class="col-md-5">
          <event-thumbnail [event]="event"></event-thumbnail>
        </div>
      </div>
    </div>
  `
})
export class EventsListComponent implements OnInit {
  events: any[];
  constructor(private eventService: EventService) {}

  ngOnInit() {
    this.events = this.eventService.getEvents();
  }
}

app.module.ts

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";

import { EventsAppComponent } from "./events-app.component";
import { EventService } from "./events/shared/event.service";
import { EventsListComponent } from "./events/events-list.component";
import { EventThumbnailComponent } from "./events/event-thumbnail.component";
import { NavBarComponent } from "./nav/nav-bar.component";

@NgModule({
  imports: [BrowserModule],
  declarations: [
    EventsAppComponent,
    EventsListComponent,
    EventThumbnailComponent,
    NavBarComponent
  ],
  providers: [EventService],
  bootstrap: [EventsAppComponent]
})
export class AppModule {}
prasanna-radha commented 4 years ago

I have no clue how this issue was resolved but I just deleted everything and created the files from the scratch with the same code snippet and it started working fine.