web-dev-qa-db-fra.com

Angular 2 Comment rediriger vers 404 ou un autre chemin s'il n'existe pas

J'essayais de rediriger 404 / autre chemin si le chemin n'existe pas dans angular 2

J'ai essayé la recherche il y a une méthode pour angular 1 mais pas angular 2.

Voici mon code:

@RouteConfig([
{
    path: '/news',
    name: 'HackerList',
    component: HackerListComponent,
    useAsDefault: true
},
{
    path: '/news/page/:page',
    name: 'TopStoriesPage',
    component: HackerListComponent
},
{
    path: '/comments/:id',
    name: 'CommentPage',
    component: HackerCommentComponent
}
])

Donc par exemple si je redirige vers /news/page/ alors cela fonctionne et il me renvoie une page vide comment gérez-vous ce genre de cas?

javascriptangularangular2-routing
70
Jason Seah

Pour les versions v2.2.2 et plus récentes

Dans les versions 2.2.2 et supérieures, la propriété name n'existe plus et ne devrait pas être utilisée pour définir l'itinéraire. path doit être utilisé à la place de name et aucune barre oblique n'est nécessaire sur le chemin. Dans ce cas, utilisez path: '404' au lieu de path: '/404':

 {path: '404', component: NotFoundComponent},
 {path: '**', redirectTo: '/404'}

Pour les versions antérieures à v2.2.2

vous pouvez utiliser {path: '/*path', redirectTo: ['redirectPathName']}:

{path: '/home/...', name: 'Home', component: HomeComponent}
{path: '/', redirectTo: ['Home']},
{path: '/user/...', name: 'User', component: UserComponent},
{path: '/404', name: 'NotFound', component: NotFoundComponent},

{path: '/*path', redirectTo: ['NotFound']}

si aucun chemin ne correspond, alors redirigez-vous vers NotFound chemin

159
Shaishab Roy

Comme Angular continuait avec la publication, je rencontrais le même problème. Selon la version 2.1., l'interface Route ressemble à ceci:

export interface Route {
    path?: string;
    pathMatch?: string;
    component?: Type<any>;
    redirectTo?: string;
    outlet?: string;
    canActivate?: any[];
    canActivateChild?: any[];
    canDeactivate?: any[];
    canLoad?: any[];
    data?: Data;
    resolve?: ResolveData;
    children?: Route[];
    loadChildren?: LoadChildren;
}

Donc mes solutions étaient les suivantes:

const routes: Routes = [
    { path: '', component: HomeComponent },
    { path: '404', component: NotFoundComponent },
    { path: '**', redirectTo: '404' }
];
25
nuvio

Mon option préférée sur 2.0. et les versions supérieures consiste à créer une route 404 et à permettre également à une route ** de se résoudre en un même composant. Cela vous permet de vous connecter et d’afficher plus d’informations sur la route non valide plutôt qu’une simple redirection qui peut masquer l’erreur.

Exemple simple 404:

{ path '/', component: HomeComponent },
// All your other routes should come first    
{ path: '404', component: NotFoundComponent },
{ path: '**', component: NotFoundComponent }

Pour afficher les informations de route incorrectes, ajoutez lors de l'importation dans le routeur dans NotFoundComponent:

import { Router } from '@angular/router';

Ajoutez-le au constructior de NotFoundComponent:

constructor(public router: Router) { }

Ensuite, vous êtes prêt à le référencer depuis votre modèle HTML, par exemple.

The page <span style="font-style: italic">{{router.url}}</span> was not found.

18
robnordon

Comme le dit Shaishab Roy, vous pouvez trouver la réponse dans la feuille de triche.

Mais dans sa réponse, la réponse donnée était:

{path: '/home/...', name: 'Home', component: HomeComponent}
{path: '/', redirectTo: ['Home']},
{path: '/user/...', name: 'User', component: UserComponent},
{path: '/404', name: 'NotFound', component: NotFoundComponent},

{path: '/*path', redirectTo: ['NotFound']}

Pour certaines raisons, cela ne fonctionne pas de mon côté, alors j'ai essayé à la place:

{path: '/**', redirectTo: ['NotFound']}

et il fonctionne. Soyez prudent et n'oubliez pas que vous devez le mettre à la fin, sinon vous aurez souvent la page d'erreur 404;).

9
Wetteren Rémi

assurez-vous, utilisez cette route 404 écrite au bas du code.

la syntaxe sera comme

{
    path: 'page-not-found', 
    component: PagenotfoundComponent
},
{
    path: '**', 
    redirectTo: '/page-not-found'
},

Je vous remercie

1
Harikrishnan k