jmcooper / angular-fundamentals-files

353 stars 536 forks source link

Getting 'Can't resolve all parameters for EventListComponent: (?). #6

Closed GimmeDaRibs closed 5 years ago

GimmeDaRibs commented 5 years ago

I followed along in the Creating Reusable Angular Services: Creating Your First Service

My code matched the modifications made in the video, however, my page would not render and I received the error about the parameters not resolving for EventListComponent.

I tried out the Plunker exercise, and the expected list of events rendered as expected.

In my own project, I had to modify the service code with the the forwardRef method:

`import { Component, OnInit, Inject, ForwardRefFn, forwardRef } from '@angular/core'; import { EventService } from '../shared/event.service';

@Component({ selector: 'events-list', templateUrl: 'events-list.component.html' }) export class EventsListComponent implements OnInit { events: any[]; constructor(@Inject(forwardRef(() => EventService))private eventService: EventService) {

}

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

const EVENTS = ...`

the page is rendering, but it seems like a kludge that injects the service into the component.

My other code is as follows: app.module.ts `import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core';

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

@NgModule({ declarations: [ EventsAppComponent, EventsListComponent, EventThumbnailComponent, NavBarComponent ], imports: [ BrowserModule ], providers: [ EventService ], bootstrap: [EventsAppComponent] }) export class AppModule { }`

As I said, in Plunker I registered the service without issue in the NgModule declaration. I followed the instructions at the beginning of the course to make sure my ngmodule versions matched what was used in the course. I am confused why this is failing to compile locally.

Let me know if anymore information is needed.

Thanks, Brent

Fearshion commented 5 years ago

I also had this issue and I found that you need to add import 'core-js/es7/reflect'; to your events-list.component.ts file to get it to work.

GimmeDaRibs commented 5 years ago

Mathew,

Thank you for the response. I wound up creating a new project and kept it on Angular 7 and just moved my code files over. The course is running smoothly on it with minimal changes needed to the code presented in the lectures.

If I get a chance, I definitely want to try out the reflect package.

Thanks, Brent

DeeJEarl88 commented 5 years ago

I couldn't get this to work even with adding that 'core-js/es7/reflect' import?