Error Cannot match any routes URL Segment - Angular 2

Question

I am new to angular2  I am trying to understand how to use multiple  lt router-outlets gt  in a particular template  I have gone though many QA here but couldn t resolve my error   router module ts  const routes  Routes           path          redirectTo   one       pathMatch   full           path   two       component  ClassTwo  children                          path   three               component  ClassThree              outlet   nameThree                                    path   four               component  ClassFour              outlet   nameFour                         component1 html   lt h3 gt In One lt  h3 gt    lt nav gt       lt a routerLink   two  class  dash-item  gt    Go to Two    lt  a gt       lt a routerLink   three  class  dash-item  gt     Go to THREE    lt  a gt       lt a routerLink   four  class  dash-item  gt    Go to FOUR    lt  a gt   lt  nav gt    lt router-outlet gt  lt  router-outlet gt                       Successfully loaded component2 html  lt router-outlet name  nameThree   gt  lt  router-outlet gt     Error  Cannot match any routes  URL Segment   three   lt router-outlet name  nameFour   gt  lt  router-outlet gt      Error  Cannot match any routes  URL Segment   three    component2 html   lt h3 gt In two lt  h3 gt    component3 html   lt h3 gt In three lt  h3 gt    component4 html   lt h3 gt In four lt  h3 gt    The below screenshot is my current output    When I click    Go to Two    In two is printed  But clicking on other two links gives me the error Cannot match any routes

User · Answer

please modify your router module ts as   const routes  Routes           path          redirectTo   one       pathMatch   full           path   two       component  ClassTwo  children                          path   three               component  ClassThree              outlet   nameThree                                    path   four               component  ClassFour              outlet   nameFour                                  path                 redirectTo   two              pathMatch   full                         and in your component1 html   lt h3 gt In One lt  h3 gt    lt nav gt       lt a routerLink   two  class  dash-item  gt    Go to Two    lt  a gt       lt a routerLink   two three  class  dash-item  gt     Go to THREE    lt  a gt       lt a routerLink   two four  class  dash-item  gt    Go to FOUR    lt  a gt   lt  nav gt    lt router-outlet gt  lt  router-outlet gt                       Successfully loaded component2 html  lt router-outlet name  nameThree   gt  lt  router-outlet gt     Error  Cannot match any routes  URL Segment   three   lt router-outlet name  nameFour   gt  lt  router-outlet gt      Error  Cannot match any routes  URL Segment   three

User · Answer

Solved myself  Done some small structural changes also  Route from Component1 to Component2 is done by a single  lt router-outlet gt   Component2 to Comonent3 and Component4  is done by multiple  lt router-outlet  name   xxxxx  gt  The resulting contents are    Component1 html   lt nav gt       lt a routerLink   two  class  dash-item  gt Go to 2 lt  a gt   lt  nav gt       lt router-outlet gt  lt  router-outlet gt    Component2 html    lt a  routerLink      two    outlets    nameThree     three       gt In Two   Go to 3            lt  a gt    lt a  routerLink      two    outlets    nameFour     four       gt    In Two   Go to 4     lt  a gt     lt router-outlet name  nameThree  gt  lt  router-outlet gt    lt router-outlet name  nameFour  gt  lt  router-outlet gt    The   two  represents the parent component  and   three  and   four   represents the link to the respective children of  component2             Component3 html and Component4 html are the same as in the question   router module ts  const routes  Routes           path          redirectTo   one       pathMatch   full           path   two       component  ClassTwo  children                           path   three               component  ClassThree              outlet   nameThree                                   path   four               component  ClassFour              outlet   nameFour

[angular] Error: Cannot match any routes. URL Segment: - Angular 2

Examples related to angular

Examples related to angular2-routing