Angular 2 Shows "Not Found" when routing to /test

Question

I am new to angular development and i try to add routing to my application but it working fine for some of the routes but not working for some routes i don't know what's wrong in my route coding example when i route /events it working when i route events/:id it also working but when i route /test this is not working.

Here is my files and code please give me suggesting

app-component.js

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

test.component.ts

import { Component } from '@angular/core'
@Component({
    template: `<h1>Hello from testing component</h1>`
})
export class TestComponent{ }

routes.ts

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' },
]

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

Answer 1

I have created Plunker with working navigation to the test module. The problem can be that in navigation was used relational path instead of absolute. For better understanding check Angular routing documentation.

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