Lazy loading with tab router navigation

Question

There seems to be a problem when using router navigation with lazy loaded modules. This works fine if I remove lazy loading. But here is my setup according to lazy loading modules:

In my app.template I have the main router-outlet defined.

I have the following root app router

export const ROUTES: Routes = [
  {
    path: 'user/:id', loadChildren: './user/profile/profile.module#ProfileModule'
  }
]

When profile module is loaded into the main router-outlet it will display a page with two routing tabs and inside profile.module I have the following child routes defined

const ROUTES: Routes = [
    {
        path: '', component: ProfileComponent,
        children: [
            { path: 'subPath1', loadChildren: '../subModule1/subModule1.module#SubModule1Module' },
            { path: 'subPath2', loadChildren: '../subModule2/subModule2.module#SubModule2Module' },
        ]
    }
];

@NgModule({
    imports: [
        RouterModule.forChild(ROUTES),
     ....
    ]
}

Inside profile.template I have routing tab defined like this

<nav md-tab-nav-bar>
          <a class="tab-label" md-tab-link [routerLink]="'subPath1'" routerLinkActive #rla="routerLinkActive" [active]="rla.isActive">
            Sub path 1
          </a>
          <a class="tab-label" md-tab-link [routerLink]="'subPath2'" routerLinkActive #rla="routerLinkActive" [active]="rla.isActive">
            Sub path 2
          </a>
        </nav>
      <router-outlet></router-outlet>

When I route e.g. to /user/:id/subPath2 I would expect subModule2 to be loaded into the router-outlet of the md-tab-nav-bar but instead it is being loaded into the main application router-outlet. This closes the profile.component and displays only submodule2 instead of displaying it inside the tab.

Any idea why this is not working with lazy loading modules?

user3875721 · Accepted Answer · 2017-04-12 13:19:00Z

1

in Angular2 RouterModule

forChild creates a module that contains all the directives and the given routes, but does not include the router service.

forRoot creates a module that contains all the directives, the given routes, and the router service itself.

I think you most use forRoot, because forChild get only child

 RouterModule.forRoot(ROUTES)

answered Apr 12, 2017 at 13:19

user3875721

Sign up to request clarification or add additional context in comments.

6 Comments

doorman Over a year ago

Thanks, yes this seems to be the problem but I need forChild because I am lazy loading the module. When I removed the lazy loading it worked fine. Do you know how to make this work for lazy loading modules?

user3875721 Over a year ago

I didn't work with lazy but i think you need add component to children { path: 'subPath1', component: ***SomeComponent*** , loadChildren: '../subModule1/subModule1.module#SubModule1Module' }

doorman Over a year ago

Thanks alot, you were right adding the component did the trick. I will mark it as the correct answer!

user3875721 Over a year ago

I'm glad that you helped )

Ishaan Puniani Over a year ago

Same issue but didn't get it working. Actually I didn;t get what needs to be SomeComponent

|

Collectives™ on Stack Overflow

Lazy loading with tab router navigation

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related