Question

在Angular 4中我无法上班

当定位URL localhost：8088时，我被重定向到localhost：8088 / maps和页面显示，但是当直接定位localhost：8088 / maps时，我找不到404页面。

我需要的是能够直接写入URL，即localhost：8088 / maps

我有这个路线档案：

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

这个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
    }

这个组件

import { Component  } from '@angular/core'

@Component({
    template: `
      <h1>Map</h1>

    `
  })
  export class MapDetailComponent { 

  }

Answer 1

您应该键入localhost：8088 /＃/ maps

Angular 4路线不起作用

1 个答案: