Angular 2 and aws, routes not found

问题

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.

回答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>

回答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.

来源：https://stackoverflow.com/questions/42059850/angular-2-and-aws-routes-not-found

标签

amazon-web-services

angular

amazon-s3