Why my angular app sometime show 404 error?

Question

I have a site deployed using github page and sometime i get a 404 error, this also happend in localhost using ng serve --open

If you try to go on this page for the first time, you may have a 404 error : https://maximegillot.github.io/formation/kafka

But if you go to home page : https://maximegillot.github.io/ and manualy navigate to /formation/kafka you probably wont have any problems ...

I also have this problem when my site is deployed using ng serve --open

I feel like this problem is random and i dont know where to start investigating.

To deploy i just use ng build --aot --vendor-chunk --common-chunk --delete-output-path --build-optimizer and publish /dist/mgi-site/* on github : https://github.com/MaximeGillot/MaximeGillot.github.io

my index.html

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Gillot Maxime</title>
  <base href="/">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css"/>
  <link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet"
        type="text/css"/>
  <link rel="icon" type="image/x-icon" href="assets/favicon.ico"/>
  <script src="https://use.fontawesome.com/releases/v5.15.3/js/all.js" crossorigin="anonymous">
...
</head>
<body>
<app-root></app-root>
</body>
</html>

file app-routing.module.ts :

const routes: Routes = [

  {path: '', redirectTo: 'home', pathMatch: 'full'},
  {path: 'formation/nifi', component: FormationNifiComponent},
  {path: 'formation/kafka', component: FormationKafkaComponent},
  {path: 'home', component: MainComponent},
  {path: 'cv', component: CvComponent},
  {path: 'projets', component: ProjetComponent}

];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {
}

Does this answer your question? [Deploy Angular 7 to github pages](https://stackoverflow.com/questions/53621549/deploy-angular-7-to-github-pages) — The Fabio, Jun 29 '21 at 01:59

score 0 · Answer 1 · answered Jun 28 '21 at 23:56

Angular is a single page application and when deployed without using the #, the hosting site tries to find the path locally as a folder path which doesn't exist and the reason why you get the 404 error.

If you don't have one already, you will need a web.config file set up to handle the redirects.

<?xml version="1.0" encoding="utf-8"?>
<configuration>

<system.webServer>
  <rewrite>
    <rules>
      <rule name="Angular Routes" stopProcessing="true">
        <match url=".*" />
        <conditions logicalGrouping="MatchAll">
          <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
          <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
        </conditions>
        <action type="Rewrite" url="./index.html" />
      </rule>
    </rules>
  </rewrite>
</system.webServer>

</configuration>

SOURCES:

https://angular.io/guide/deployment#server-configuration https://indepth.dev/posts/1239/deploy-an-angular-application-to-iis

githubPages does not use IIS, and web.config is a IIS file... — The Fabio, Jun 29 '21 at 02:02

Why my angular app sometime show 404 error?

1 Answers1