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.

What server are you using? Do you have the <base href="/"> as first child in your <head> tag? — Günter Zöchbauer
– Günter Zöchbauer, Commented Aug 29, 2016 at 13:04
<script>document.write('<base href="' + document.location + '" />');</script> this line is given after head tag. — Hemanjali
– Hemanjali, Commented Aug 29, 2016 at 13:07
i have given route /students for StudentsComponent, when i running that route, its showing url not found on server. By the way i am using apache2 — Hemanjali
– Hemanjali, Commented Aug 29, 2016 at 13:10

Hemanjali · Accepted Answer · 2016-08-30 13:17:08Z

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.

edited Aug 30, 2016 at 13:17

answered Aug 30, 2016 at 11:00

Hemanjali

231 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

j2L4e · Accepted Answer · 2016-08-29 13:37:07Z

0

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 {}

answered Aug 29, 2016 at 13:37

j2L4e

7,0581 gold badge36 silver badges40 bronze badges

1 Comment

Hemanjali Over a year ago

Thanks. But i want to use PathLocationStrategy. Can you help me for that.

Collectives™ on Stack Overflow

routing in angular2 typescript (RC5)

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related