In Angular, What is ‘pathmatch: full’ and what effect does it have?

by 
RouterModule.forRoot([
      { path: 'welcome', component: WelcomeComponent },
      { path: '', redirectTo: 'welcome', pathMatch: 'full' },
      { path: '**', component: 'pageNotFoundComponent' }
    ])

Case 1 pathMatch:'full':
In this case, when app is launched on localhost:4200 (or some server) the default page will be welcome screen, since the url will be https://localhost:4200/

If https://localhost:4200/gibberish this will redirect to pageNotFound screen because of path:'**' wildcard

Case 2
pathMatch:'prefix':

If the routes have { path: '', redirectTo: 'welcome', pathMatch: 'prefix' }, now this will never reach the wildcard route since every url would match path:'' defined.

More Related Contents:

  1. How do I share data between components in Angular 2?
  2. Error when trying to inject a service into an angular component “EXCEPTION: Can’t resolve all parameters for component”, why?
  3. How to get query parameters from URL in Angular 5?
  4. Angular2 – FormControl Validation on blur
  5. Getting “Uncaught (in promise): TypeError: Object(…) is not a function” Error from Ionic-native VideoEditor Plugin
  6. Typescript/Angular/ES6: can I finally let `hasOwnProperty()` die in for loops?
  7. Angular4 Exception: Can’t bind to ‘ngClass’ since it isn’t a known property of ‘input’
  8. No provider for AngularFireDatabase, AngularFireAuth
  9. Angular 2 ‘component’ is not a known element
  10. Multiple canActivate guards all run when first fails
  11. TS2531: Object is possibly ‘null’
  12. How to make a sequence of http requests in Angular 6 using RxJS
  13. Custom ExceptionHandler change detection lag
  14. Trigger update of component view from service – No Provider for ChangeDetectorRef
  15. TypeError: You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable
  16. Pass parameter into route guard
  17. Best method to set different layout for different pages in angular 4
  18. Typescript dependency injection public vs private
  19. Rxjs Retry with Delay function
  20. What is the meaning of question mark in expressions in Angular 2?
  21. Merging http observables using forkjoin
  22. Angular: selected on option of select doesn’t work as excepted while using along with ngModel
  23. TypeScript-‘s Angular Framework Error – “There is no directive with exportAs set to ngForm”
  24. How to return observable from subscribe
  25. How to mock Angular 4.3 httpClient an error response in testing
  26. Angular 2 creating reactive forms with nested components
  27. Limit input field to two decimal places – Angular 5
  28. Angular 6 – how to mock router.events url response in unit test
  29. How to create and download text/Json File with dynamic content using angular 2+
  30. Angular4 Load external html page in a div

Leave a Comment