Angular 角度2表示“角度”；“未找到”；路由到/测试时

我是angular development的新手，我尝试将路由添加到我的应用程序中，但它对某些路由正常工作，但对某些路由不起作用我不知道路由

/events

时路由编码示例中的错误是什么，当我路由

事件/：id

时它也起作用，但当我路由

/test

时，这是错误的不工作

这是我的文件和代码，请给我建议

app-component.js

import { Component } from '@angular/core'
@Component({
    selector: 'event-app',
    template: `
        <navbar></navbar>
        <router-outlet></router-outlet>
    `})
export class EventAppComponent{ }

app-module.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { RouterModule } from '@angular/router'
import { EventAppComponent } from './app.component'
import { EventListComponent } from './events/events-list.component'
import { EventListThumbnailComponent } from './events/events-list.thumbnail.component'
import { EventDetailComponent } from './events/event-details/event-detail.component'
import { NavbarComponent } from './nav/navbar.component'
import { EventService } from './events/events-service'
import { ToastrService } from './common/toastr.service'
import { CreateEventComponent } from './events/event-create.component'
import { Error404Component } from './error/404.component'
import { EventRouteActivator } from './events/events-route.activator.service'
import { EventsListResolverService } from './events/events-list.resolver.service'
import { TestComponent } from './test/test.component'
import { AppRoutes } from './routs'

@NgModule({

    imports : [ 
        BrowserModule,
        RouterModule.forRoot(AppRoutes,
            { enableTracing: true })
    ],
    declarations: [
        EventAppComponent,
        EventListComponent,
        EventListThumbnailComponent,
        EventDetailComponent,
        NavbarComponent,
        CreateEventComponent,
        Error404Component,
        TestComponent
    ],
    providers: [ 
        EventService,
        ToastrService,
        EventRouteActivator,
        EventsListResolverService
    ],
    bootstrap: [ EventAppComponent ]

})
export class AppModule{ }

我已经创建了测试模块的工作导航。问题可能是导航中使用了关系路径而不是绝对路径。为了更好地理解，请检查

@组件({
选择器：“我的应用程序”，
模板：`
你好{{name}
导航到测试
`,
})
导出类应用程序{
名称：字符串；
构造函数（）{
this.name=`Angular！v${VERSION.full}`
}
}
@NGD模块({
导入：[BrowserModule、FormsModule、RouterModule.forRoot（批准、，
{enableTracing:true}]，
声明：[应用程序，测试组件]，
引导：[应用程序]
})
导出类AppModule{}

我创建了指向测试模块的工作导航。问题可能是导航中使用了关系路径而不是绝对路径。为了更好地理解，请检查

@组件({
选择器：“我的应用程序”，
模板：`
你好{{name}
导航到测试
`,
})
导出类应用程序{
名称：字符串；
构造函数（）{
this.name=`Angular！v${VERSION.full}`
}
}
@NGD模块({
导入：[BrowserModule、FormsModule、RouterModule.forRoot（批准、，
{enableTracing:true}]，
声明：[应用程序，测试组件]，
引导：[应用程序]
})
导出类AppModule{}

查看您在

canActivate

guards上声明的内容，如果它添加在某个地方，您应该为您想要激活的孩子提供访问权限。查看您在

canActivate

guards上声明的内容，如果它添加在某个地方，您应该为您想要激活的孩子提供访问权限。

import { Routes } from '@angular/router'
import { EventListComponent } from './events/events-list.component'
import { EventDetailComponent } from './events/event-details/event-detail.component'
import { CreateEventComponent } from './events/event-create.component'
import { Error404Component } from './error/404.component'
import { EventRouteActivator } from './events/events-route.activator.service'
import { EventsListResolverService } from './events/events-list.resolver.service'
import { TestComponent } from './test/test.component'

export const AppRoutes: Routes = [
    { path: 'events/new', component: CreateEventComponent },
    { path: '404', component: Error404Component },
    { path: 'test', component: TestComponent },
    { path: 'events', component: EventListComponent, resolve: {events: EventsListResolverService} },
    { path: 'events/:id', component: EventDetailComponent, 
        canActivate:[EventRouteActivator] },
    { path: '', redirectTo: '/events', pathMatch: 'full' },
]

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { RouterModule } from '@angular/router'
import { EventAppComponent } from './app.component'
import { EventListComponent } from './events/events-list.component'
import { EventListThumbnailComponent } from './events/events-list.thumbnail.component'
import { EventDetailComponent } from './events/event-details/event-detail.component'
import { NavbarComponent } from './nav/navbar.component'
import { EventService } from './events/events-service'
import { ToastrService } from './common/toastr.service'
import { CreateEventComponent } from './events/event-create.component'
import { Error404Component } from './error/404.component'
import { EventRouteActivator } from './events/events-route.activator.service'
import { EventsListResolverService } from './events/events-list.resolver.service'
import { TestComponent } from './test/test.component'
import { AppRoutes } from './routs'

@NgModule({

    imports : [ 
        BrowserModule,
        RouterModule.forRoot(AppRoutes,
            { enableTracing: true })
    ],
    declarations: [
        EventAppComponent,
        EventListComponent,
        EventListThumbnailComponent,
        EventDetailComponent,
        NavbarComponent,
        CreateEventComponent,
        Error404Component,
        TestComponent
    ],
    providers: [ 
        EventService,
        ToastrService,
        EventRouteActivator,
        EventsListResolverService
    ],
    bootstrap: [ EventAppComponent ]

})
export class AppModule{ }

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <button routerLink="/test">Navigate to test</button>
    </div>
    <router-outlet></router-outlet>
  `,
})
export class App {
  name:string;

  constructor() {
    this.name = `Angular! v${VERSION.full}`
  }
}

@NgModule({
  imports: [ BrowserModule, FormsModule, RouterModule.forRoot(AppRoutes,
            { enableTracing: true }) ],
  declarations: [ App, TestComponent ],
  bootstrap: [ App ]
})
export class AppModule {}