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?
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.
- 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 .
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.
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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With