Setting Wild Card Route in Angular

Daftar Isi: (toc)

In the post Angular Routing Concepts With Example we saw an example of setting up routes for navigation. One question though is what if user navigates to a path that does not exist. Ideally you should also handle such scenario and show a page not found or navigate to home page when user tries to navigate to a non-existent path. In this post we’ll see how to set up wild card route in Angular to handle any case when the requested URL doesn’t match any router path.

In this example wild card route is set up to show page not found message.

Wild card route in Angular

For setting up a wild card route in Angular you use ‘**’ (double asterisk). This wild card route catches all routes that are not configured with in the route definition.

{ path: '**', component: COMPONENT_NAME}

Do ensure that the wildcard route is the last one in the route definition ordering as wild card route matches every URL.

This order of routes is important because the Router uses a first-match wins strategy. When matching routes if wildcard route, which matches every URL, is at the top then the component paired with wildroute will be the one always called. Follow the order of-

  • List routes with a static path first.
  • Empty path route (with a possible redirection).
  • The wildcard route comes last.

Wild card route Angular Example

Routing module with route definitions including wild card route (app-routing.module.ts).

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AccountsComponent } from './accounts/accounts.component';
import { AccountComponent } from './accounts/account/account.component';
import { HomeComponent } from './home.component';
import { ServiceComponent } from './service.component';

const routes: Routes = [
{path: 'home', component: HomeComponent},
{path: 'account', component: AccountsComponent},
{path: 'account/:acctno', component: AccountComponent},
{path: 'service', component: ServiceComponent},
{path: '', redirectTo:'/home', pathMatch: 'full'},
{path: '**', component: PageNotFoundComponent}
];

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

Do notice the route order, static paths first, then the default route redirect using empty path and then the wild card route.

PageNotFoundComponent (pagenotfound.component.ts)

@Component({
selector: 'app-pagenotfound',
templateUrl: './pagenotfound.component.html'
})
export class PageNotFoundComponent{

}

pagenotfound.component.html

<h3>404 Page Not Found!!</h3>

For other component’s code please refer this post- Angular Routing Concepts With Example

Now if you try to navigate any URL that doesn’t match any of the configured routes you will be sent to PageNotFoundComponent.

wild card route in Angular


That's all for this topic Setting Wild Card Route in Angular. If you have any doubt or any suggestions to make please drop a comment. Thanks!

>>>Return to Angular Tutorial Page


Related Topics

  1. Path Redirection in Angular Routing
  2. Using RouterLinkActiveOptions to Fix Link Highlighted Problem
  3. Nested Route (Child Route) in Angular
  4. Angular Route Parameters - Setting and Fetching
  5. Passing Query Parameters in Angular Routing

You may also like-

  1. Angular ngFor Directive With Examples
  2. Angular One-Way Data Binding Using String Interpolation
  3. Angular Two-Way Data Binding With Examples
  4. Angular - Call One Service From Another
  5. ConcurrentHashMap in Java With Examples
  6. Var type in Java - Local Variable Type Inference
  7. What Are JVM, JRE And JDK in Java
  8. How to Write a Map Only Job in Hadoop MapReduce
Find Out
Related Post



Ikuti AltairGate.com pada Aplikasi GOOGLE NEWS : FOLLOW (Dapatkan Berita Terupdate tentang Dunia Pendidikan dan Hiburan). Klik tanda  (bintang) pada aplikasi GOOGLE NEWS.

Disclaimer:
Kebijakan Hak Cipta:

Semua Gambar, artikel ataupun video yang di publikasikan situs ini terkadang berasal dari berbagai sumber media lain, tidak terkait dengan kami sama sekali yang artinya milik penulisnya masing-masing. Kami hanya menyediakan wallpaper gratis yang menarik dari seluruh internet.

Semua kredit dan terima kasih ditujukan kepada penulis, pemilik dan pengunggah asli. Kami menghormati Hukum Hak Cipta. Hak Cipta sepenuhnya dipegang oleh sumber tersebut. penggunaan komersial apa pun sangat dilarang tanpa persetujuan sebelumnya dari penulis.

Kami Berkomitmen untuk menghapus foto atau wallpaper yang melanggar hak cipta dari blog kami.

Jika Anda menemukan konten yang tidak perlu di sini, silakan hubungi (radhyantz@gmail.com) sesegera mungkin sehingga kami dapat melakukan sesuatu tentang hal itu.

Seperti menghapusnya atau meletakkan nama Anda di bawahnya. Setiap foto yang ada di situs dapat dihapus atas permintaan sederhana dari penulis. Jika ada masalah terkait hal ini, Anda dapat menghubungi kami disini. Terima kasih..

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.
close