routing in angular2 typescript (RC5)

Question

i am doing basic student application, where i have a problem understanding routing.

app.modules.ts:

import { NgModule }       from '@angular/core';
import { BrowserModule }  from '@angular/platform-browser';
import { FormsModule }    from '@angular/forms';
//import { HttpModule, JsonpModule, XHRBackend } from '@angular/http';

//import { InMemoryBackendService } from 'angular2-in-memory-web-api';
import { AppComponent }   from './app.component';
import { routes }        from './app.routes';

import { StudentsComponent }      from './students.component';
//import { AddStudentComponent }   from './add-student.component';
//import { StudentDetailComponent }  from './student-detail.component';

import { StudentService }  from './student.service';

@NgModule({
  imports: [
BrowserModule,
FormsModule,
routes,
//    HttpModule,
//    JsonpModule
],
declarations: [
AppComponent,
StudentsComponent,
// AddStudentComponent,
//    StudentDetailComponent
],
providers: [
 StudentService,
 //    { provide: XHRBackend, useClass: InMemoryBackendService }, 
],
bootstrap: [ AppComponent ]
})
export class AppModule {
}

app.routes.ts:

import { Routes, RouterModule } from '@angular/router';
import { ModuleWithProviders }  from '@angular/core';
//import { AddStudentComponent } from './add-student.component';

import { StudentsComponent } from './students.component';
//import { StudentDetailComponent } from './student-detail.component';

const appRoutes: Routes = [
{
    path: '',
    redirectTo: '/students',
    pathMatch: 'full'
},
{
    path: 'students',
    component: StudentsComponent
}
//  {
//    path: 'add',
//    component: AddStudentComponent
//  },
//  {
//    path: 'update/:roll',
//    component: StudentDetailComponent
//  },

];

export const routes: ModuleWithProviders = RouterModule.forRoot(appRoutes);

I don't understand what's wrong in routing, it isn't working.. I am trying to display students component as default page.

Answer 1

Problem is not with routing. There are 2 things i have been modified.

1) In app.modules.ts the below line should be added:

import { HttpModule, JsonpModule } from '@angular/http';

and

2)In imports of app.modules.ts the comments i kept before HttpModule and JsonpModule have to removed. i.e add

HttpModule,
JsonpModule

in imports.

Thank you all, Who supported.

Answer 2

Apache tries to serve /students which obviously isn't present on the server. Apache can't know about angular's routes.

There are (at least) two ways to approach this:

Server-side:
Rewrite any (non-file) requests to index.html as described here

Client-side:
Switch to HashLocationStrategy

@NgModule({
  providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}]
})
class AppModule {}