In a Angular 4 I cant get my route to work
When targeting the URL localhost:8088, I get redirected to localhost:8088/maps, and page displays, but when directly targeting localhost:8088/maps I get a 404 page not found.
What I need is to be able to write the URL directly i.e. localhost:8088/maps
I have this route file:
import {Routes} from '@angular/router'
import {EventsListComponent} from './events/events-list.component'
import {EventDetailsComponent} from './events/event-details/event-details.component'
import {CreateEventComponent} from './events/create-event.component'
import {Error404Component} from './errors/404.components'
import {EventRouteActivator} from './events/event-details/event-route-activator.service'
import {EventListResolver} from './events/event-list-resolver.service'
import {MapDetailComponent} from './map/map-detail.component'
export const appRoutes:Routes = [
{path: 'events/new', component: CreateEventComponent, canDeactivate: ['CanDeactivateCreatedEvent']},
{path: 'events', component: EventsListComponent, resolve: {events:EventListResolver}},
{path: 'events/:id', component: EventDetailsComponent, canActivate: [EventRouteActivator]},
{path: 'maps', component:MapDetailComponent},
{path: '404', component: Error404Component},
{path: '', redirectTo: '/maps', pathMatch: 'full'}
]
And this app_module.ts
import {NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {RouterModule} from '@angular/router'
import {EventsAppComponent} from './events-app.component'
import {EventsListComponent} from './events/events-list.component'
import {EventThumbnailComponent} from './events/event-thumbnail.component'
import {NavBarComponent} from './nav/navbar.component'
import {EventService} from './events/shared/event.service'
import {ToastrService} from './common/toastr.service'
import {EventDetailsComponent} from './events/event-details/event-details.component'
import {appRoutes} from './routes'
import {CreateEventComponent} from './events/create-event.component'
import {Error404Component} from './errors/404.components'
import {EventRouteActivator} from './events/event-details/event-route-activator.service'
import {EventListResolver} from './events/event-list-resolver.service'
import {MapDetailComponent} from './map/map-detail.component'
//import { HubService } from 'ngx-signalr-hubservice';
@NgModule({
imports:[
BrowserModule,
RouterModule.forRoot(appRoutes)
],
declarations: [
EventsAppComponent,
EventsListComponent,
EventThumbnailComponent,
EventDetailsComponent,
CreateEventComponent,
NavBarComponent,
MapDetailComponent,
Error404Component
],
providers: [
EventService,
ToastrService,
EventRouteActivator,
EventListResolver,
//HubService,
{
provide: 'CanDeactivateCreatedEvent',
useValue: checkDirtyState
}
],
bootstrap: [EventsAppComponent]
})
export class AppModule {}
function checkDirtyState(component:CreateEventComponent){
if(component.isDirty)
return window.confirm('You have not saved this event, do you really whant to cancel?')
return true
}
And this component
import { Component } from '@angular/core'
@Component({
template: `
<h1>Map</h1>
`
})
export class MapDetailComponent {
}
