Angular 2 and aws, routes not found

Question

In try to deploy me angular 2 app on amozon web hosting. the index page works well but when I try to acces other pages like /users I got a 404 not found error.

I try to follow this post Configure Amazon S3 static site with Angular JS ui.router html5Mode(true) on page refresh without success.

here my app http://ugram-team-7.s3-website-us-east-1.amazonaws.com/

Thanks for answers.

Answer 1

config your app route to use hash #

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

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

or configure S3

In the Edit Redirection Rules section of the S3 Console for your domain, add the following rules:

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

put this in 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>

Answer 2

You can solve your problem and still use URL Rewriting.

First of all you should not distribute your website directly from S3 but placing a CloudFront distribution in front of it.

Create a custom Error Page rule on the CloudFront distribution with the following:

• HTTP Error Code: 404
• Error Caching Minimum TTL (seconds): 0
• Customize Error Response: Yes
• Response Page Path: /index.html
• HTTP Response Code: 200

Please also take a look at my guide for a detailed explanation.