CODEWITHSUNDEEP
angularangular4-router
Sreehari
Sreehari

Reputation: 1370

Not able to route to children in lazy loading module

I am fresh developer to angular 4. In one of my project, I am using lazy loading for routing. The lazy loading module contains children component. However, routing to children component is always failing with an error.

 Error: Cannot match any routes. URL Segment: 'home/addGroup'

Could you help, if I am doing something wrong? I tried in all the ways, but none of them resulted success.

Below are my modules and routing.

index.html: 

<app-root></app-root>

app.module:

import { routes } from './app.routes';

@NgModule({
    declarations: [
        AppComponent,
        UserSignupComponent,
        UserLoginComponent,
    ],
    imports: [
        BrowserModule,
        routes,
        HttpModule,
        FormsModule
    ]
});

app.routes:

import { HomeModuleModule } from './home-module/home-module.module';

export const appRoutes: Routes = [

    { path: '', redirectTo: 'login', pathMatch: 'full' },
    { path: 'login', component: UserLoginComponent },
    {
        path: 'home', loadChildren: './home-module/home-module.module#HomeModuleModule'
    }
];

export const routes: ModuleWithProviders = RouterModule.forRoot(appRoutes);

app.component.html:

 <router-outlet></router-outlet>

homemodule:

import { routes } from './home.routes';

@NgModule({
    imports: [
        CommonModule,
        BrowserModule,
        routes,
        HttpModule,
        FormsModule
    ],

    declarations: [HomeComponent, AddGroupComponent, AddItemComponent],
    providers: [httpserviceClass, sharedserviceClass],
})

home.routes:

export const router: Routes = [
    { path: '', component: HomeComponent, pathMatch: 'full' },
    {
        path: 'home', component: HomeComponent,
        children: [
            { path: 'addItem/:groupName', component: AddItemComponent },
            { path: 'addGroup', component: AddGroupComponent },
        ]
    }
];

export const routes: ModuleWithProviders = RouterModule.forChild(router);

home.component.html:

<nav class="navbar navbar-default noMargin">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Budget</a>
    </div>
    <ul class="nav navbar-nav">
      <li> <a [routerLink]="['addGroup']"> addgroup </a>         </li>
    </ul>
  </div>
</nav>

<div>
 <router-outlet></router-outlet>
</div>

The point is, I am able to redirect to "home" component of home-module from login component by

"this.router.navigate(['home']);"

However, from home component, I am not able to route to addGroup component via 

<a [routerLink]="['addGroup']"> addgroup </a>

Am I missing something?

Upvotes: 1

Views: 1479

Answers (1)

Sreehari
Sreehari

Reputation: 1370

I found the issue. I must admit that my understanding was wrong at the time when I posted the question.

I have to mention few points here.

I am routing to homeModule using the route "home" as in app.routes.

{ path: 'home', loadChildren: './home-module/home-module.module#HomeModuleModule' }

And in home.routes, I am loading "HomeComponent" as default. Hence routing to "HomeComponent" was successful.

If we keenly observe the home.routes, 

export const router: Routes = [
{ path: '', component: HomeComponent, pathMatch: 'full' },
{
    path: 'home', component: HomeComponent,
    children: [
        { path: 'addItem/:groupName', component: AddItemComponent },
        { path: 'addGroup', component: AddGroupComponent },
    ]
}
];

it contains a separate "home" route. 

        path: 'home', component: HomeComponent

As this different "home" route also contains the same name "home" in "app.routes", that added a lot of confusion.

There are two ways that I can be corrected.

1. At first, to release the confusion, change the 'home' route in home.route to 'welcome'.

         path: 'home', component: HomeComponent,

to

         path: 'welcome', component: HomeComponent,

And then now, fix the actual bug.

 { path: '', component: HomeComponent, pathMatch: 'full' }

should be changed to

 { path: '', redirectTo: 'welcome', pathMatch: 'full' }

This will redirectTo home/welcome when loading the homeComponent. And when you click on addGroup, it redirects to "/addGroup". So the resultant path would be "/home/welcome/addGroup"

  1. The secong way is, change the routes in home.routes to 

     export const router: Routes = [     
 { path: '', component: HomeComponent,
     children:[               
       {path: 'addItem/:groupName', component:AddItemComponent},
       {path: 'addGroup', component:AddGroupComponent}
     ]
  }
];

    In this case, the resultant path when routing to addGroup is simply "/home/addGroup"

Upvotes: 1

Related Questions