ERROR Error Uncaught in promise Cannot match any routes URL Segment

Question

I have simple navigation in angular 6 app    Here is HTML   lt nav class  main-nav gt   lt ul class  main-nav  list   ng-sticky  addClass    main-sticky-link    ngClass   ref click     true   Navbar  ToggleShow       gt               lt li class  main-nav  item  gt                 lt a class  main-nav  link  routerLink         routerLinkActive  active  gt Home lt  a gt               lt  li gt               lt li class  main-nav  item  gt                  lt a class  main-nav  link  routerLink     about    routerLinkActive  active  gt About us lt  a gt               lt  li gt              lt  ul gt   lt  nav gt    here is app routing module  import   NgModule   from   angular core   import   CommonModule   from   angular common   import   RouterModule  Routes   from   angular router   import   MainLayoutComponent   from    layout main-layout main-layout component   import   AboutComponent   from    components about about component   import   WhatwedoComponent   from    components whatwedo whatwedo component   import   FooterComponent   from    components footer footer component   import   ProjectsComponent   from    components projects projects component   const routes  Routes         path   about   component  AboutComponent        path   what   component  WhatwedoComponent        path   contacts   component  FooterComponent        path   projects   component  ProjectsComponent        NgModule     imports        CommonModule      RouterModule forRoot routes          declarations        export class AppRoutingModule       Here is app module  import   BrowserModule   from   angular platform-browser   import   NgModule   from   angular core   import   NgStickyDirective   from  ng-sticky   import   RouterModule   from   angular router   import   AppComponent   from    app component   import   MainLayoutComponent   from    layout main-layout main-layout component   import   AppRoutingModule   from     app-routing module   import   MainNavDirective   from    layout main-nav directive   import   AboutComponent   from    components about about component   import   WhatwedoComponent   from    components whatwedo whatwedo component   import   FooterComponent   from    components footer footer component   import   WhyChooseUsComponent   from    components why-choose-us why-choose-us component   import   TeamComponent   from    components team team component   import   ProjectsComponent   from    components projects projects component   import   ClientsComponent   from    components clients clients component   import   HowItWorksComponent   from    components how-it-works how-it-works component   import   PartnersComponent   from    components partners partners component     NgModule     declarations        AppComponent      NgStickyDirective      MainLayoutComponent      MainNavDirective      AboutComponent      WhatwedoComponent      FooterComponent      WhyChooseUsComponent      TeamComponent      ProjectsComponent      ClientsComponent      HowItWorksComponent      PartnersComponent        imports        BrowserModule      RouterModule      AppRoutingModule        providers        bootstrap   AppComponent     export class AppModule       when I run my app and click about us  i get the following error    core js 1673 ERROR Error  Uncaught  in promise   Error  Cannot match any routes  URL Segment    5B  about  5D  Error  Cannot match any routes  URL Segment    5B  about  5D      at   I have tried different combination to solve the issue but still not able to get rid of this error    what am I doing wrong in my code  any help will be helpfull thanks

User · Answer

As the error says your router link should match the existing routes configured  It should be just  routerLink   about

User · Answer

When you use routerLink like this  then you need to pass the value of the route it should go to  But when you use routerLink with the property binding syntax  like this   routerLink   then it should be assigned a name of the property the value of which will be the route it should navigate the user to   So to fix your issue  replace this routerLink     about    with routerLink   about  in your HTML   There were other places where you used property binding syntax when it wasn t really required  I ve fixed it and you can simply use the template syntax below    lt nav class  main-nav gt     lt ul      class  main-nav  list       ng-sticky      addClass  main-sticky-link        ngClass   ref click    Navbar  ToggleShow        gt       lt li class  main-nav  item  routerLinkActive  active  gt         lt a class  main-nav  link  routerLink     gt Home lt  a gt       lt  li gt       lt li class  main-nav  item  routerLinkActive  active  gt          lt a class  main-nav  link  routerLink   about  gt About us lt  a gt       lt  li gt     lt  ul gt   lt  nav gt    It also needs to know where exactly should it load the template for the Component corresponding to the route it has reached  So for that  don t forget to add a  lt router-outlet gt  lt  router-outlet gt   either in your template provided above or in a parent component   There s another issue with your AppRoutingModule  You need to export the RouterModule from there so that it is available to your AppModule when it imports it  To fix that  export it from your AppRoutingModule by adding it to the exports array   import   NgModule   from   angular core   import   CommonModule   from   angular common   import   RouterModule  Routes   from   angular router   import   MainLayoutComponent   from    layout main-layout main-layout component   import   AboutComponent   from    components about about component   import   WhatwedoComponent   from    components whatwedo whatwedo component   import   FooterComponent   from    components footer footer component   import   ProjectsComponent   from    components projects projects component   const routes  Routes         path   about   component  AboutComponent        path   what   component  WhatwedoComponent        path   contacts   component  FooterComponent        path   projects   component  ProjectsComponent        NgModule     imports        CommonModule      RouterModule forRoot routes          exports   RouterModule     declarations        export class AppRoutingModule

User · Answer

In case you need the    syntax  useful for  edit forms  when you need to pass parameters like id with the route  you would do something like    routerLink     edit   business  id     As for an  about page  with no parameters like yours    routerLink    about    or    routerLink    about     will do the trick

[javascript] ERROR Error: Uncaught (in promise), Cannot match any routes. URL Segment

Examples related to javascript

Examples related to html

Examples related to angular

Examples related to typescript

Examples related to angular-routerlink