title: Angular 2 route resolver not working, browser blank and no errors in console
body: <p>I implemented a route resolver but the entire target component (events-list.component.ts) is not shown in the browser. I only see the navbar. As shown below, the resolver gets the list of events from the events service. And no errors are shown in the Chrome developer tools console. I also tried loading the app in the Firefox browser, but the problem still persists. What could be wrong with my code? Thanks.</p>
  
  <p><strong>routes.ts file</strong></p>
  
  <p>The 'events' route is the default route which I am having the problem with.</p>
  
  <pre><code>import {Routes} from '@angular/router';
  import { EventDetailsComponent } from './events/event-details/event-details.component';
  import { EventsListComponent } from './events/events-list.component';
  import { CreateEventComponent } from './events/create-event.component';
  import { Error404Component } from './errors/404.guard';
  import { EventRouteActivator } from './events/event-details/event-route-activator.service';
  import { EventListResolver } from './events/event-list-resolver.service';
  
  export const appRoutes: Routes = [
  
      {path: 'events/new', component: CreateEventComponent, canDeactivate: ['canDeactivateCreateEvent']},
      {path: 'events', component: EventsListComponent, resolve: {events: EventListResolver}},
      {path: 'events/:id', component: EventDetailsComponent, canActivate: [EventRouteActivator]},
      {path: '404', component: Error404Component},
      {path: '', redirectTo: 'events', pathMatch: 'full'}
  ]
  </code></pre>
  
  <p><strong>event.service.ts file</strong></p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Subject } from 'rxjs';
  
  @Injectable({
    providedIn: 'root'
  })
  export class EventService {
  
    constructor() { }
  
    events = [
      {
        id: 1,
        name: 'Angular Connect',
        date: '9/26/2036',
        time: '10:00 am',
        price: 599.99,
        imageUrl: '/assets/images/angularconnect-shield.png',
        onlineUrl: 'http://ng-nl.org/'
       },
  
      {
        id: 2,
        name: 'ng-nl',
        date: '4/15/2037',
        time: '9:00 am',
        price: 950.00,
        imageUrl: '/assets/images/ng-nl.png',
        location: {
          address: 'The NG-NL Convention Center &amp; Scuba Shop',
          city: 'Amsterdam',
          country: 'Netherlands'
        }
  }
    ];
  
    getEvents(){
      let subject = new Subject();
      setTimeout(() =&gt; {subject.next(this.events); subject.complete;}, 2000)
      return subject;
    }
  
    getEvent(id: number){
    return this.events.find(event =&gt; event.id === id);
    }
  }
  </code></pre>
  
  <p><strong>resolver.service.ts file</strong></p>
  
  <pre><code>import { Injectable } from "@angular/core";
  import { EventService } from '../shared/event.service';
  import { Resolve } from '@angular/router';
  import { map } from 'rxjs/operators'
  
  @Injectable({
      providedIn: 'root'
  })
  
  export class EventListResolver implements Resolve&lt;any&gt;{
  
      constructor(private eventService: EventService){
  
      }
  
      resolve() { 
          return this.eventService.getEvents().pipe(map(events =&gt; events));
      }
  
  }
  </code></pre>
  
  <p><strong>event-list.component.ts file</strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { EventService } from '../shared/event.service';
  import { ToastrService } from '../shared/toastr.service';
  import { ActivatedRoute } from '@angular/router';
  
  @Component({
    templateUrl: './events-list.component.html',
    styleUrls: ['./events-list.component.css']
  })
  export class EventsListComponent implements OnInit {
  
    events: any[];
  
    constructor(private eventService: EventService, private toastrService: ToastrService, private route: ActivatedRoute) { }
  
    ngOnInit() {
      this.events = this.route.snapshot.data['events'];
    }
  
    handleThumbnailClick(eventName){
    this.toastrService.success(eventName)
    }
  }
  </code></pre>
  
  <p><strong>events-list.component.html</strong></p>
  
  <pre><code>&lt;div&gt;
      &lt;h1&gt;Upcoming angular events&lt;/h1&gt;
      &lt;hr&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-md-5" *ngFor="let event of events" &gt;
          &lt;event-thumbnail [event]="event" (click)="handleThumbnailClick(event.name)"&gt;&lt;/event-thumbnail&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>I don't even see the h1 tag's text "Upcoming angular events". I only see the navbar and then the rest of the page is blank.</p>
  
  <p><strong>events-app.component.ts file (main bootstrapped component)</strong></p>
  
  <pre><code>import { Component } from '@angular/core';
  
  @Component({
    selector: 'events-app',
    template: `&lt;nav-bar&gt;&lt;/nav-bar&gt;
    &lt;router-outlet&gt;&lt;/router-outlet&gt;`,
    //styleUrls: ['./app.component.css']
  })
  export class EventsAppComponent {
    title = 'ng-fundamentals';
  }
  </code></pre>