Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'site-notice'


Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'site-notice'



Im totaly confused about this error. I have a very basic simple routing:


const routes: Routes = [
{
path: '', component: FrameDefaultComponent, pathMatch: 'full',
children: [
{path: '', component: SiteCalculatorComponent},
{path: 'site-notice', component: SiteSiteNoticeComponent}
]
},
];



When i click the menu entrie for site-notice in the menu that looks like this:


menuEntries = [
{
title: 'Calculator',
url: '/'
},
{
title: 'Site Notice',
url: '/site-notice'
}
];



Then i get the following error:


core.js:1521 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'site-notice'
Error: Cannot match any routes. URL Segment: 'site-notice'
at ApplyRedirects.push../node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError (router.js:1359)
at CatchSubscriber.selector (router.js:1340)
at CatchSubscriber.push../node_modules/rxjs/_esm5/internal/operators/catchError.js.CatchSubscriber.error (catchError.js:33)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
at TapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/tap.js.TapSubscriber._error (tap.js:61)
at ApplyRedirects.push../node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError (router.js:1359)
at CatchSubscriber.selector (router.js:1340)
at CatchSubscriber.push../node_modules/rxjs/_esm5/internal/operators/catchError.js.CatchSubscriber.error (catchError.js:33)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
at TapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/tap.js.TapSubscriber._error (tap.js:61)
at resolvePromise (zone.js:814)
at resolvePromise (zone.js:771)
at zone.js:873
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (core.js:3645)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
at drainMicroTaskQueue (zone.js:595)
at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:500)
at invokeTask (zone.js:1540)



The Routing looks for me like the routing system i every time used... But never saw this error.





Where did you define your routes? If you define it in app.module RouterModule.forRoot(routes) - include this. If it is a sub-module, then include this, RouterModule.forChild(routes). Hope this helps.
– harold_mean2
Jul 2 at 2:15




2 Answers
2



Make pathMatch : 'prefix' for parent route or you could simply remove it.


pathMatch : 'prefix'


route



pathMatch: 'full' for parent route will block the child routes from being executed.


pathMatch: 'full'


route


child routes


const routes: Routes = [
{
path: '', component: FrameDefaultComponent, pathMatch: 'prefix',
children: [
{path: '', component: SiteCalculatorComponent},
{path: 'site-notice', component: SiteSiteNoticeComponent}
]
},
];





This was the solution i was looking for! I still dont really understand the real useingCases for pathMatch The Angular documentation is not clear for me.angular.io/api/router/Routes Maybe you can give us a extendet explain for the possible pathMatches
– Budi
Jul 2 at 9:36


pathMatch


pathMatch





This should give you a fair idea on pathMatch attribute stackoverflow.com/questions/42992212/…
– Amit Chigadani
Jul 2 at 9:44


pathMatch



I think the order of the routes mattter with angular , change it as follows,


const routes: Routes = [
{
path: '', component: FrameDefaultComponent, pathMatch: 'full',
children: [
{path: 'site-notice', component: SiteSiteNoticeComponent}
{path: '', component: SiteCalculatorComponent}
]
},
];






By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

-

Popular posts from this blog

How to add background colour in existing image using Swift?

How to add background colour in existing image using Swift? I am trying to add background colour to existing image but it is not working. Here below is my code:- extension UIImage { func imageWithColor(tintColor: UIColor) -> UIImage { let rect = CGRect(x: 0, y: 0, width: 1, height: 1) UIGraphicsBeginImageContextWithOptions(rect.size, false, 0) tintColor.setFill() UIRectFill(rect) let image: UIImage = UIGraphicsGetImageFromCurrentImageContext()! UIGraphicsEndImageContext() //self.type(of: init)(ciImage: CIImage(image: image)!) return image } } extension UIImage { /** Returns an UIImage with a specified background color. - parameter color: The color of the background */ convenience init(withBackground color: UIColor) { let rect: CGRect = CGRect(x: 0, y: 0, width: 1, height: 1) UIGraphicsBeginImageContext(rect.size); let context:CGContext = UIGraphicsGetCurrentContext()!; context.setFillColor(color.cgColor); context.fill(rec...
Read more

Moria Casán

Image
Moria Casán Casán in 2016 Born Ana María Casanova ( 1946-08-16 ) August 16, 1946 (age 71) Buenos Aires, Argentina Residence Parque Leloir, Ituzaingó, Buenos Aires Province, Argentina [1] Occupation Actress, presenter, theatre producer, TV personality, talent manager Years active 1970–present Spouse(s) Mario Castiglione ( m.  1986; div.  1990) Children Sofía Gala Castiglione Signature Ana María Casanova (born August 16, 1946), known by her stage name Moria Casán , is an Argentine actress and TV personality. Casán made her theatre debut in 1970, and quickly became one of the country's leading vedettes during Argentina's Golden Age of revue. Her sex symbol status was further cemented during the late 1970s and 1980s, as she starred in various sexual comedy films alongside Alberto Olmedo, Jorge Porcel and Susana Giménez. Since the mid-1980s, Casán has also established herself as an important TV personality, hostin...
Read more

How to make file upload 'Required' in Contact Form 7?

How to make file upload 'Required' in Contact Form 7? I have a Contact Form 7 form on my Wordpress website and I have specified that the file upload is mandatory by putting a * , however the users are able to submit the form without file upload. * Relevant Contact Form 7 form is given below: <div class="filelink">[file* AddanImage filetypes:gif|png|jpg|jpeg]</div> How do I write the Contact Form 7 code or add a validation perhaps so that the users are not able to submit the form without uploading an image? Any hints/help/guidance is highly appreciated. Have you check doc - contactform7.com/file-uploading-and-attachment – Mukesh Panchal Jun 30 at 8:38 @MukeshPanchal I have and the code complies with the documentation – Hamza Ahmad Jul 1 at 10:44 ...
Read more