event-route.activator.service.ts

import { Injectable } from '@angular/core';
import{ CanActivate, ActivatedRouteSnapshot, Router } from '@angular/router';
import { EventService } from './../shared/event.service';

@Injectable()

export class EventRouteActivator implements CanActivate{

    constructor(private eventService: EventService, private router: Router){}

    canActivate(route: ActivatedRouteSnapshot){
        const eventExists = !!this.eventService.getEvent(+route.params['id']);
        if(!eventExists){
            this.router.navigate(['/404']);
        return eventExists;
        }
    }
}

routes.ts

import { Routes } from '@angular/router'
import { CreateEventComponent } from './app/events/event-details/create-event.component';
import { EventDetailsComponent } from './app/events/event-details/event-details.component';
import { EventListComponent } from './app/events/event-list.component';
import { EventRouteActivator } from './app/events/event-details/event-route.activator.service';
import { Error404Component } from './app/errors/404.component';

export const appRoutes:Routes = [
    { path: 'events/new', component: CreateEventComponent, canDeactivate: ['canDeactivateCreateEvent']},
    { path: 'events', component: EventListComponent },
    { path: 'events/:id', component: EventDetailsComponent, canActivate: [EventRouteActivator] },   
    { path: '404', component: Error404Component }, 
    { path: '', redirectTo: '/events', pathMatch: 'full' }
]

app.module.ts

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

import { EventsAppComponent } from './events-app.component';
import { EventListComponent } from './events/event-list.component';
import { EventThumbnailComponent } from './events/event-thumbnail.component';
import { NavBarComponent } from './nav/navbar-component';
import { EventService } from './events/shared/event.service';
import { ToastrService } from './common/toastr.service';
import { EventDetailsComponent } from './events/event-details/event-details.component';
import { RouterModule } from '@angular/router';
import { appRoutes } from 'src/routes';
import { CreateEventComponent } from './events/event-details/create-event.component';
import { Error404Component } from './errors/404.component';
import { EventRouteActivator } from './events/event-details/event-route.activator.service';

@NgModule({
  declarations: [
    EventsAppComponent,
    EventListComponent,
    EventThumbnailComponent,
    NavBarComponent,
    EventDetailsComponent,
    CreateEventComponent,
    Error404Component
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(appRoutes)
  ],
  providers: [
    EventService, 
    ToastrService, 
    EventRouteActivator,
      {
        provide:'canDeactivateCreateEvent',
        useValue: checkDirtyState
      }
  ],
  bootstrap: [EventsAppComponent]
})
export class AppModule { }

export function checkDirtyState(component: CreateEventComponent){
  if(component.isDirty)
    return window.confirm('You have not saved this event, do you really want to cancel?')
  return true
}