Question

我正在做基本的学生申请，我在理解路由时遇到了问题。

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);

我不明白路由中的错误，它不起作用。我正在尝试将学生组件显示为默认页面。

Answer 1

问题不在于路由。有两件事我被修改过。

1）在 app.modules.ts 中，应添加以下行：

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

和

2）在 app.modules.ts 的导入中，我必须删除HttpModule和JsonpModule之前保留的注释。即添加

HttpModule,
JsonpModule

进口。

谢谢大家，谁支持。

Answer 2

Apache尝试提供/students，这显然不在服务器上。 Apache无法知道angular的路线。

至少有两种方法可以解决这个问题：

服务器侧
如here

所述，将任何（非文件）请求重写为index.html
<强>客户端：
切换到HashLocationStrategy

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

angular2打字稿中的路由（RC5）

2 个答案: