Error Uncaught in promise Error Cannot match any routes Angular 2

Question

Error I have implemented nested routing in my app  when application loads its shows login screen after login its redirects to admin page where further child routes exist like user  product  api etc  now when I navigate to admin it by default loads user screen but further  lt routeLinks gt  not working and its shows this error  Error  Uncaught  in promise   Error  Cannot match any routes   product   After Click Product it shows this    Code main ts import   bootstrap      from   angular platform-browser-dynamic   import   APP ROUTER PROVIDERS   from     app app routes   import   AppComponent   from     app app component    bootstrap AppComponent   APP ROUTER PROVIDERS       app component import   Component   from   angular core   import   ROUTER DIRECTIVES   from   angular router     Component     selector   demo-app     template          lt div class  quot outer-outlet quot  gt         lt router-outlet gt  lt  router-outlet gt       lt  div gt         directives   ROUTER DIRECTIVES     export class AppComponent        app routes import   provideRouter  RouterConfig   from   angular router    import   AboutComponent  AboutHomeComponent  AboutItemComponent   from     app about component   import   HomeComponent   from     app home component    export const routes  RouterConfig              path           component  HomeComponent               path   admin       component  AboutComponent      children                     path               component  AboutHomeComponent                            path    product            component  AboutItemComponent                        export const APP ROUTER PROVIDERS       provideRouter routes        home component import   Component   from   angular core     Component     selector   app-home     templateUrl     app layouts login html     export class HomeComponent        about component import   Component   from   angular core   import   ActivatedRoute  ROUTER DIRECTIVES   from   angular router     Component     selector   about-home     template    lt h3 gt user lt  h3 gt      export class AboutHomeComponent       Component     selector   about-item     template    lt h3 gt product lt  h3 gt      export class AboutItemComponent       Component       selector   app-about       templateUrl      app layouts admin html       directives   ROUTER DIRECTIVES     export class AboutComponent

User · Answer

I had the same problem and later I realised that my app-routing module ts was inside a sub folder called app-routing  I moved this file directly under src and now it is working   Now app-routing file has access to all the components

User · Answer

If your passing id  then try to follow this method   const routes  Routes        path     redirectTo   home   pathMatch  full       path  home   component HomeComponent      path  add   component AddComponent      path  edit  id   component EditComponent      path  show  id   component ShowComponent      NgModule     imports         CommonModule      RouterModule forRoot routes         exports   RouterModule     declarations        export class AppRoutingModule

User · Answer

For me adding AppRoutingModule to my imports solved the problem        imports         BrowserModule       AppRoutingModule       RouterModule forRoot                   path   new-cmp           component  NewCmpComponent

User · Answer

I was having the same error while I was doing AngularJS application  I did not see any error from my terminal but when I debug with google developer tool  I have got this error    After having this error  I reviewed my routing module first   since I was not seeing anything while requesting local host  login   I found out that I misspelled the login as lgin and when I correct it works fine  I am just sharing this just to pay attention for any typo error we might encounter with put us in a great time loose

User · Answer

If you are passing id through url please use below  imports        BrowserModule      FormsModule      HttpModule      RouterModule forRoot           path   Employees   component  EmployeesComponent  pathMatch   full             path   Add   component  EmployeeAddComponent  pathMatch   full               path   Edit  id   component  EmployeeEditComponent            path   Edit   component  EmployeeEditComponent              path      redirectTo   Employees   pathMatch   full                   i e If you are passing any id we need to both url edit with id and edit url alone

User · Answer

I think that your mistake is in that your route should be product instead of  product    So more something like     children             path           component  AboutHomeComponent                 path   product        component  AboutItemComponent

User · Answer

I had the issue the imports for the routing module must come after the child module  this might not be directly related to this post but it would have helped me if I read this   https   angular io guide router module-import-order-matters  imports      BrowserModule    FormsModule    ChildModule    AppRoutingModule

User · Answer

I had to use a wildcard route at the end of my routes array     path        redirectTo   home     And the error was resolved

User · Answer

In my case an iframe with a bound src was trying to get host null   when the value of the bound variable was null    Adding an  ngIf to it helped   I changed    lt iframe  src   iframeSource  gt  lt  iframe gt    to   lt iframe  src   iframeSource   ngIf  iframeSource  gt  lt  iframe gt

User · Answer

I am using angular 4 and faced the same issue apply  all possible solution but finally  this solve my problem  export class AppRoutingModule   constructor private router  Router        this router errorHandler    error  any    gt            this router navigate   404        or redirect to default route               Hope this will help you

User · Answer

This May be helpful     I personally prefer dynamic import  angular 8    path   pages   loadChildren       gt  import    pages pages module   then mod   gt  mod PageModule      In child routing it should look like    path   about   component  AboutComponent     Note that there is no pages in path of child routing and in routerLink or nsRouterLink it should look like routerLink   pages about   I hope thi help someone out there

User · Answer

For me it worked like the code below  I made a difference between RouterModule forRoot and RouterModule forChild  Then in the child define the parent path and in the children array the childs   parent-routing module ts  RouterModule forRoot           path   parent      parent path  define the component that you imported earlier       component  ParentComponent          RouterModule forChild           path   parent     parent path     children                    path               redirectTo    parent childs     full child path         pathMatch   full                           path   childs            component  ParentChildsComponent                          Hope this helps

User · Answer

I also had the same issue  Tried all ways and it didn t work out until I added the following in app module ts  import   Ng4LoadingSpinnerModule   from  ng4-loading-spinner     And add the following in your imports in app module ts  Ng4LoadingSpinnerModule forRoot     This case might be rare but I hope this helps someone out there

User · Answer

As for me resetConfig only works  this router resetConfig newRoutes     Or concat with previous   this router resetConfig     newRoutes     this router config      But keep in mind that the last must be always route with path

[typescript] Error: Uncaught (in promise): Error: Cannot match any routes Angular 2

Examples related to typescript

Examples related to angular2-routing