2017-02-06 1 views
1

Попробуйте развернуть мое приложение с угловым 2 на веб-хостинге amozon. индексная страница работает хорошо, но когда я пытаюсь получить доступ к другим страницам, например /users, я получил ошибку 404 not found.Угловые 2 и aws, маршруты не найдены

Я стараюсь следить за этим сообщением Configure Amazon S3 static site with Angular JS ui.router html5Mode(true) on page refresh без успеха.

здесь мое приложение http://ugram-team-7.s3-website-us-east-1.amazonaws.com/

Спасибо за ответы.

ответ

4

конфигурации вашего приложения маршрут использовать хэш #

const routes: Routes = [ 
    // routes here 
]; 

@NgModule({ 
    imports: [ 
    ... other imports 
    RouterModule.forRoot(routes, { useHash: true }) // .../#/users/ 
    ], 
    ... 
}) 
export class SomeModule { } 

или настроить S3

В Редактировать Перенаправление Правила секции S3 консоли для домена, добавьте следующие правила:

<RoutingRules> 
    <RoutingRule> 
    <Condition> 
     <HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals> 
    </Condition> 
    <Redirect> 
     <HostName>domain.com</HostName> 
     <ReplaceKeyPrefixWith>#/</ReplaceKeyPrefixWith> 
    </Redirect> 
    </RoutingRule> 
</RoutingRules> 

положить это в index.html

<script language="javascript"> 
if (typeof(window.history.pushState) == 'function') { 
    window.history.pushState(null, "Site Name", window.location.hash.substring(2)); 
} else { 
    window.location.hash = window.location.hash.substring(2); 
} 
</script> 
+0

это прекрасно работает! – Lilrom

+0

Я рад помочь! –

1

Вы можете решить вашу проблему и по-прежнему использовать URL-переписку.

Прежде всего, вы не должны распространять свой сайт непосредственно с S3, но перед этим размещаете дистрибутив CloudFront.

Создать правило страницы ошибок на распределение CloudFront со следующим:

  • Код HTTP Error: 404
  • Ошибка Кэширование Минимальный TTL (в секундах): 0
  • Настройка Response Error: Да
  • Ответ Страница Путь: /index.html
  • код ответа HTTP: 200

Пожалуйста, также take a look at my guide для подробного объяснения.