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
– jordanm

2020-07-21 16:49:48 +00:00
Commented Jul 21, 2020 at 16:49 — jordanm
– jordanm, Commented Jul 21, 2020 at 16:49
@jordanm yes i enabled it

fellowGenius Technologies
– fellowGenius Technologies

2020-07-21 17:16:21 +00:00
Commented Jul 21, 2020 at 17:16 — fellowGenius Technologies
– fellowGenius Technologies, Commented Jul 21, 2020 at 17:16
Did you set the error document to index.html?

jordanm
– jordanm

2020-07-21 17:26:50 +00:00
Commented Jul 21, 2020 at 17:26 — jordanm
– jordanm, Commented Jul 21, 2020 at 17:26

AWS PS · Accepted Answer · 2020-07-21 16:58:47Z

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

answered Jul 21, 2020 at 16:58

AWS PS

4,7731 gold badge11 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

BrunoJPP · Accepted Answer · 2023-11-21 18:59:04Z

0

I fixed this problem using two simultaneous ways. One of the ways was used in the topic above and the other in the topic: When I refresh my website I get a 404. This is with Angular2 and firebase . I used both ways because my route files were separate from app.module.ts:

// APP.MODULE.TS:

...
    import { HashLocationStrategy, LocationStrategy } from '@angular/common'; // put this import
    
    @NgModule({
        declarations: [AppComponent, WelcomeComponent, ConfirmationDialogComponent,
              ],
        providers: [
        provideHttpClient(withInterceptors([jwtInterceptor, errorInterceptor, spinnerInterceptor])),
        { provide: LocationStrategy, useClass: HashLocationStrategy }, // put this code
        ],
        bootstrap: [AppComponent],
...

// APP.ROUTING.MODULE.TS:

...
@NgModule({
  // imports: [RouterModule.forRoot(routes, { bindToComponentInputs: true })],
  imports: [RouterModule.forRoot(routes, { useHash: true })], //put this code
  exports: [RouterModule],
})
export class AppRoutingModule {}

...

answered Nov 21, 2023 at 18:59

BrunoJPP

1

1 Comment

Joel Garcia Nuño Over a year ago

Hi, try to specify over each file example the according description to clarify why use one way or the other way.

Collectives™ on Stack Overflow

404 error on reloading angular project when deployed on aws s3

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related