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

0
votes

I'm pretty new to angular and I'm facing a issue that I don't understand.

I have my route configured as follow

const routes : Route[] = [

{ path: '', pathMatch: 'full', redirectTo: 'sso' },
{ path: 'sso',pathMatch: 'full', loadChildren: './sso/sso.module#SsoModule' },

{
    path: 'auth',
    component: LayoutComponent,
    canActivate : [AuthGuard],
    children: [
        { path: '', redirectTo: 'home', pathMatch: 'full' },
        { path: 'home', pathMatch: 'full', loadChildren: './home/home.module#HomeModule' },

        { path: 'accountService',  loadChildren: './ace/ace.module#AceModule' },



    ]
}, 

{ 
    path: 'auth', 
    component: AceCallbackComponent,
    canActivate : [AuthGuard],
    children: [
        { path: 'accountServiceCallback', loadChildren: './ace/ace.module#AceModule', pathMatch: 'full' }
    ]
},

{ path: 'connect',pathMatch: 'full', loadChildren: './connect/connect.module#ConnectModule' },
{
    path: 'widget',
    component: LandingLayoutPageComponent,
    canActivate : [AuthGuardWidget],
    children: [
        { path: '', redirectTo: 'landing', pathMatch: 'full' },
        { path: 'landing', pathMatch: 'full', loadChildren: './widget/widget.module#WidgetModule' },

    ]

},

The last module is the WidgetModule that has path "widget/landing"

Widget.module:

const routes: Routes = [
  { path: '', component: LandingPageComponent, pathMatch : 'full' },
  { path: 'home', component: LandingPageComponent, pathMatch : 'full' },
];

the issue is that when I hit "widget/landing" it works, but when I hit "widget/landing/home" I get the error

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

All the other routes correctly working.

Someone can give me some hint?

thanks

2
angularrouting

2 Answers

0
votes

In your case router will be confused beacuse you have given to paths for same component so instead of doing this try below solution,

here's an example

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch : 'full' },
  { path: 'home', component: LandingPageComponent},
];
0
votes

strong text Change your widget routes to below:

  const routes: Routes = [
       { path: '', component: LandingPageComponent, **pathMatch : 'full'** },
         children: [
           { path: 'home', component: LandingPageComponent, **pathMatch : 'full'** }
          ]
     ];