Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular 2 How to redirect to 404 or other path if the path does not exist [duplicate]

I was trying to redirect 404 / other path if the path does not exist in angular 2

I tried research there is some method for angular 1 but not angular 2.

Here is my 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
}
])

So example if I redirect to /news/page/ then it works and it return me an empty page how do you handle this kind of case happen?

like image 461
Jason Seah Avatar asked Oct 11 '22 22:10

Jason Seah


People also ask

How to redirect to a component (URL path) in angular routing?

In this article we'll see how to redirect to a component (URL path) in Angular routing. To set up a redirect in an Angular route definition you will have to use redirectTo property. For redirection you need to configure a route with the following three things- A pathMatch value to tell the router how to match the URL.

How to setup 404 page in angular routing?

- GeeksforGeeks How to setup 404 page in angular routing ? To set up a 404 page in the angular routing, we have to first create a component to display whenever a 404 error occurred. In the following approach, we will create a simple angular component called PagenotfoundComponent .

What is 404 error in angular 2/4?

You just built your first application using Angular 2 (or 4) and the tester comes to you saying that when he refreshes the page using the browser he get a 404 error. How it comes? Angular doesn’t use anymore the # in the URL. When you refresh the page using the URL showed by Angular the web server doesn’t find any valid match.

What is pathmatch in angular?

In the above route definition pathMatch value is used as ‘full’ which means value specified with path will be matched fully with the path after the base URL. Another value for pathMatch is ‘prefix’ which tells the Angular to check if the path in the URL starts with the value given with path or not.


1 Answers

For version v2.2.2 and newer

In version v2.2.2 and up, name property no longer exists and it shouldn't be used to define the route. path should be used instead of name and no leading slash is needed on the path. In this case use path: '404' instead of path: '/404':

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

For versions older than v2.2.2

you can use {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']}

if no path matches then redirect to NotFound path

like image 144
Shaishab Roy Avatar answered Oct 14 '22 16:10

Shaishab Roy