Bonjour j'ai mis en place un système de redirection lorsqu'un path n'existe pas.

 export const appRoutes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'afficher/:dossier/:fichier.txt', component: FileComponent, runGuardsAndResolvers: 'always' },
  { path: 'not-found', component: FourOhFourComponent},
  { path: '**', redirectTo: '/not-found' }
]

Cela fonctionne en général, sauf dans un cas précis: lorsqu'un fichier txt (dont le nom est passé en paramètre dans l'URL) n'existe pas, c'est-à-dire dans le cas suivant:

http://localhost:port/afficher/dossier/fichier.txt

Ce fichier txt est stocké dans le dossier assets, et je vais le chercher via une requête (avec un fetch) pour ensuite l'afficher dans mon component.

Cependant, si je mets un fichier qui n'existe pas, le component s'affiche bel et bien, avec une page blanche. J'aimerais que la page soit redirigée vers mon component gérant l'erreur (/not-found). Qu'est-ce que je dois faire pour ça ?

En attendant, j'ai bricolé ceci, dans le constructeur:

fetch('assets/text/'
      +this.route.snapshot.params['dossier']
      +'/'
      +this.route.snapshot.params['fichier'])
      .then(response => response.text())
      .then(data => {
        if(data.includes('Cannot GET')){
          this.router.navigate(['/not-found']);
        }
      });

ça marche mais j'avoue que ça fait un peu dégueulasse car on voit dans un premier temps le component (avec page blanche) s'afficher, puis ensuite on voit dans un second temps la redirection vers /not-found.

Des suggestions?