CODEWITHSUNDEEP
typescriptangular2-routing
Malik Kashmiri
Malik Kashmiri

Reputation: 5861

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'

enter image description here

After Click Product it shows this enter image description here

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

Upvotes: 74

Views: 231713

Answers (14)

Varun Thomas
Varun Thomas

Reputation: 1

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)

Upvotes: 0

Sandeep Srivastava
Sandeep Srivastava

Reputation: 11

For me adding AppRoutingModule to my imports solved the problem. 

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

Upvotes: 1

Dylan Meeus
Dylan Meeus

Reputation: 5812

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

Upvotes: 73

Harrison O
Harrison O

Reputation: 1220

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.

Upvotes: 0

Eli
Eli

Reputation: 1836

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>

Upvotes: 1

Mirshad
Mirshad

Reputation: 133

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

Upvotes: 3

Enkode
Enkode

Reputation: 4803

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

Upvotes: 8

someone
someone

Reputation: 11

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

Upvotes: 1

Vlad
Vlad

Reputation: 8572

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

Upvotes: 1

Jayant Patil
Jayant Patil

Reputation: 1587

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.

Upvotes: 12

alex351
alex351

Reputation: 1964

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

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

And the error was resolved.

Upvotes: 16

Moh K
Moh K

Reputation: 514

I was having the same error while I was doing AngularJS application. I did not see any error from my terminalcompiled successfully but when I debug with google developer tool, I have got this errorerror message.

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! after correcting the typo error

Upvotes: 2

guest
guest

Reputation: 11

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

Upvotes: 1

Dirk Jan
Dirk Jan

Reputation: 2469

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.

Upvotes: 12

Related Questions