Angular2 Routing дает 404 при перезагрузке страницы

Я написал свой первый Угловое приложение дротик, но что-то не так остроумие маршрутизации ...Angular2 Routing дает 404 при перезагрузке страницы

@Component(
    selector: 'ahpmui', 
    template: ''' 
     <strong>My First Angular 2 App - {{name}}</strong> 
     <br /> 
     <router-outlet> 
     </router-outlet> 
     <br /> 
     <nav> 
      <a [routerLink]="['HomePage']">Home</a> | 
      <a [routerLink]="['DashboardPage']">Dashboard</a> 
     </nav> 
    ''', 
    directives: const [ROUTER_DIRECTIVES], 
    providers: const [ 
     ROUTER_PROVIDERS, 
     HomePage, 
     DashboardPage 
    ] 

) 
@RouteConfig(const [ 
    const Route(path: '/dashboard', component: DashboardPage, name: 'DashboardPage', useAsDefault: true), 
    const Route(path: '/home', component: HomePage, name: 'HomePage') 
]) 
class AppComponent { 

    String name = "Sample App"; 

}

HomePage:

@Component(
    selector: 'home-page', 
    template: '<strong>This is the Home Page</strong>') 
class HomePage {}

информационной панелью:

@Component(
    selector: 'dashboard-page', 
    template: '<strong>This is the Dashboard Page</strong>') 
class DashboardPage {}

main.dart:

// bootstrap angular2 
    bootstrap(AppComponent, [ 
     ROUTER_PROVIDERS, 
     provide(APP_BASE_HREF, useValue: '/'), 
     provide(LocationStrategy, useClass: HashLocationStrategy) 
    ]);

Когда мое приложение запускается, оно идет до http://localhost:8080/dashboard, как и ожидалось, при нажатии на ссылку Home оно правильно переходит в http://localhost:8080/home. Если я теперь обновите страницу, я получаю сообщение об ошибке 404

Я тогда изменения начальной загрузки части к этому:

// bootstrap angular2 
    bootstrap(AppComponent, [ 
     ROUTER_PROVIDERS, 
     provide(APP_BASE_HREF, useValue: '/#/'), 
     provide(LocationStrategy, useClass: HashLocationStrategy) 
    ]);

URL-адрес теперь следующим образом (я предпочитаю его в этом стиле, так как наследие приложение не использует этот же формат URL)

http://localhost:8080/#/dashboard 
http://localhost:8080/#/home

Если я ударил обновление, больше не получает ошибку 404, но страница перенаправляет обратно на http://localhost:8080/#/dashboard страница.

Я бег приложения с помощью pub serve

Есть ли способ, что я могу связать в onHashChange случае в угловой маршрутизатор так, что если я обновить http://localhost:8080/#/home, что это на самом деле маршруты к HomeComponent?

источник

2016-06-03 Jan Vladimir Mostert

AFAIR Формат URL такой же, как и в случае с 'HashLocationStrategy'. Что происходит, когда вы полностью удаляете строку 'обеспечивать (APP_BASE_HREF, ...)' (не уверены, требуется ли это для 'HashLocationStrategy'). Можете ли вы также попробовать '' (вместо 'обеспечения (APP_BASE_HREF, ...)') в качестве первого элемента в теге заголовка? –

Удалить ROUTER_PROVIDERS, от AppComponent, у вас их уже есть bootstrap(). ROUTER_PROVIDERS должен предоставляться только один раз.

источник

2016-06-03 14:03:54

Изменение AppBaseHref на просто '/' с помощью HashProvider также дает мне желаемый формат URL '/ #/home' :-D –

Yup, как и ожидалось: D –

Angular2 Routing дает 404 при перезагрузке страницы

ответ

Смежные вопросы