404 error on reloading angular project when deployed on aws s3

Question

I have an angular project that is deployed aws s3

I built the project using ng build --prod

I copied the dist folder files in the s3 bucket..

The page loads smoothly for the first time but when i reload it .. it shows me this error

GET https://fellowgenius.com/facade 404

How do I solve this?

Here is my index html page:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>FellowGenius</title>
    <base href="./" />
    <script>
      var global = global || window;
      var Buffer = Buffer || [];
      var process = process || {
        env: { DEBUG: undefined },
        version: [],
      };
    </script>
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>

  <body class="mat-typography">
    <app-root></app-root>
  </body>
</html>

Did you enable static website hosting on the bucket? – jordanm Jul 21 '20 at 16:49 — jordanm, Jul 21 '20 at 16:49
@jordanm yes i enabled it – fellowGenius Technologies Jul 21 '20 at 17:16 — fellowGenius Technologies, Jul 21 '20 at 17:16
Did you set the error document to index.html? – jordanm Jul 21 '20 at 17:26 — jordanm, Jul 21 '20 at 17:26

score 1 · Accepted Answer · answered Jul 21 '20 at 16:58

By default, HTML5 history is used for reusing in Angular2.

To fix the 404 error, you need to update your server to serve the index.html file for each route path you defined.

If you want to switch to the HashBang approach, you need to use this configuration:

import {bootstrap} from 'angular2/platform/browser';
import {provide} from 'angular2/core';
import {ROUTER_PROVIDERS} from 'angular2/router';
import {LocationStrategy, HashLocationStrategy} from '@angular/common';

import {MyApp} from './myapp';

bootstrap(MyApp, [
  ROUTER_PROVIDERS,
  {provide: LocationStrategy, useClass: HashLocationStrategy}
]);

Reference: When I refresh my website I get a 404. This is with Angular2 and firebase

404 error on reloading angular project when deployed on aws s3

1 Answers1

Linked