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

##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 <routeLinks> 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: `

    <div class="outer-outlet">
      <router-outlet></router-outlet>
    </div>
  `,
  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: `<h3>user</h3>`
})
export class AboutHomeComponent { }

@Component({
  selector: 'about-item',
  template: `<h3>product</h3>`
})
export class AboutItemComponent { }

@Component({
    selector: 'app-about',
    templateUrl: '../app/layouts/admin.html',
    directives: [ROUTER_DIRECTIVES]
})
export class AboutComponent { }
	  

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 
   }
 ]

I had to use a wildcard route at the end of my routes array.

{ path: '**', redirectTo: 'home' }

And the error was resolved.

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.

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) => {
		this.router.navigate(['404']); // or redirect to default route
	}
  }
}

Hope this will help you.

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
],

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!

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 { }

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

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 **

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

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:

<iframe [src]="iframeSource"></iframe>

to

<iframe [src]="iframeSource" *ngIf="iframeSource"></iframe>

For me adding AppRoutingModule to my imports solved the problem.

    imports: [
     BrowserModule,
     AppRoutingModule,
     RouterModule.forRoot([
      {
        path: 'new-cmp',
        component: NewCmpComponent
      }
     ])
    ]

This May be helpful:

//I personally prefer dynamic import (angular 8)
{ path: 'pages', loadChildren: () => import('./pages/pages.module').then(mod => 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.

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)