UIAngular/Client/src/app/app.module.ts

import { WindowRefService } from './services/window-ref.service';
import { EmailService } from './services/email.service';
import { SermonService } from './services/sermon.service';
import { LoginService } from './services/login.service';
import { ProgressService } from './services/xhr-progress.service';
import { ProgressXhr } from './extensions/xhr-progress.extension';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule, BrowserXhr } from '@angular/http';
import { MdButtonModule, 
         MdInputModule, 
         MdSliderModule, 
         MdSnackBarModule, 
         MdDialogModule,
         MdCardModule } from '@angular/material';
import { RouterModule }   from '@angular/router';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
//import 'hammerjs';

//Components
import { AppComponent } from './components/app/app.component';
import { MenuComponent } from './components/menu/menu.component';
import { IconButtonComponent } from './components/icon-button/icon-button.component';
import { HomeComponent } from './components/home/home.component';
import { WhoWeAreComponent } from './components/whoweare/whoweare.component';
import { ServicesComponent } from './components/services/services.component';
import { SecondaryPageComponent } from './components/secondary-page/secondary-page.component';
import { RecentSermonsComponent } from './components/recent-sermons/recent-sermons.component';
import { SermonSmallComponent } from './components/sermon-small/sermon-small.component';
import { DateComponent } from './components/date/date.component';
import { UpcomingEventsComponent } from './components/upcoming-events/upcoming-events.component';
import { EventComponent } from './components/event/event.component';
import { SermonsComponent } from './components/sermons/sermons.component';
import { AudioPlayerComponent } from './components/audio-player/audio-player.component';
import { LocationComponent } from './components/location/location.component';
import { SermonLargeComponent } from './components/sermon-large/sermon-large.component';
import { AddSermonPopupComponent } from './components/popups/add-sermon-popup/add-sermon-popup.component';
import { LoginPopupComponent } from './components/popups/login-popup/login-popup.component';
import { InputPopupComponent } from './components/popups/input-popup/input-popup.component';

//Directives
import { FadeInOnScrollDirective } from './directives/fade-in-on-scroll.directive';
import { IconDirective } from './directives/icon.directive';

//Pipes
import { DurationPipe } from './pipes/duration.pipe';
import { OkPopupComponent } from './components/popups/ok-popup/ok-popup.component';
import { YesNoPopupComponent } from './components/popups/yes-no-popup/yes-no-popup.component';
import { UpdateSermonPopupComponent } from './components/popups/update-sermon-popup/update-sermon-popup.component';
import { ContactPageComponent } from './components/contact-page/contact-page.component';
import { SharePopupComponent } from './components/popups/share-popup/share-popup.component';
import { SafeUrlPipe } from './pipes/safe-url.pipe';
import { EventsPageComponent } from './components/events-page/events-page.component';

const Routes =
  [
      {
        path: '',
        redirectTo: '/home',
        pathMatch: 'full'
      },{
        path: 'home',
        component: HomeComponent
      },
      {
        path: 'whoweare',
        component: WhoWeAreComponent
      },
      {
        path: 'services',
        component: ServicesComponent
      },
      {
        path: 'contact',
        component: ContactPageComponent
      },
      {
        path: 'sermons',
        redirectTo: 'sermons/0'
      },
      {
        path: 'sermons/:id',
        component: SermonsComponent
      },
      {
        path: 'location',
        component: LocationComponent
      },
      {
        path: 'events',
        component: EventsPageComponent
      }
    ]

@NgModule({
  declarations: [
    AppComponent,
    MenuComponent,    
    IconButtonComponent,
    HomeComponent,
    WhoWeAreComponent,
    ServicesComponent,
    FadeInOnScrollDirective,
    IconDirective,
    SecondaryPageComponent,
    RecentSermonsComponent,
    SermonSmallComponent,
    DateComponent,
    UpcomingEventsComponent,
    EventComponent,
    SermonsComponent,
    AudioPlayerComponent,
    DurationPipe,
    LocationComponent,
    SermonLargeComponent,
    AddSermonPopupComponent,
    LoginPopupComponent,
    OkPopupComponent,
    InputPopupComponent,
    YesNoPopupComponent,
    UpdateSermonPopupComponent,
    ContactPageComponent,
    SharePopupComponent,
    SafeUrlPipe,
    EventsPageComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    BrowserAnimationsModule,
    //Angular Material Components
    MdButtonModule,
    MdInputModule,
    MdSliderModule,
    MdSnackBarModule,
    MdDialogModule,
    MdCardModule,
    RouterModule.forRoot(Routes)
    
  ],
  providers: [LoginService,SermonService,ProgressService,EmailService,WindowRefService,{provide:BrowserXhr,useClass:ProgressXhr}],
  entryComponents: [AddSermonPopupComponent,
                    LoginPopupComponent,
                    OkPopupComponent,
                    InputPopupComponent,
                    YesNoPopupComponent,
                    UpdateSermonPopupComponent,
                    SharePopupComponent],
  bootstrap: [AppComponent]
})

export class AppModule { 
  public routes = Routes;
}