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>

Answer 1

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

Question

1 answers

solution1
1 ACCPTED 2020-07-21 16:58:47

404 error on reloading angular project when deployed on aws s3

Question

1 answers

solution1 1 ACCPTED 2020-07-21 16:58:47

solution1
1 ACCPTED 2020-07-21 16:58:47