Angular 5: How to routing nested lazy-loaded modules?

Question

I'm trying to reuse a feature-module Questionnaires in another feature-module Identify, by using lazy-loading, in such a way that the final URL should be like Identify-Route/Questionnaires-Route. Note that the Identify module is lazy-loaded too, and that the modules are at the same level. The problem I'm encountering is that when I go to the Identify main component, I'm automatically redirect to the child route for the main Questionnaires component.

This is my identify-routing.module:

import {NgModule} from '@angular/core';
import {Routes, RouterModule} from '@angular/router';
import {IdentifyComponent} from './identify.component';

const routes: Routes = [
    {
        path: '',
        component: IdentifyComponent,
        children: [
            {
                path: 'questionnaires',
                loadChildren: 'app/questionnaires/questionnaires.module#QuestionnairesModule'
            }
        ]
    }
];

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

export class IdentifyRoutingModule {
}

This is my questionnaires-routing.module:

import {NgModule} from '@angular/core';
import {Routes, RouterModule} from '@angular/router';
import {QuestionnaireComponent} from './questionnaires/questionnaire/questionnaire.component';
import {QuestionnairesComponent} from './questionnaires/questionnaires.component';

const routes: Routes = [
    {path: 'questionnaires', component: QuestionnairesComponent},
    {path: 'questionnaire', component: QuestionnaireComponent}
];

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

export class QuestionnairesRoutingModule {
}

and finally my app-routing.module

import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import {errorRoute, navbarRoute} from './layouts';
import {DEBUG_INFO_ENABLED} from './app.constants';

const routes: Routes = [
    navbarRoute,
    ...errorRoute,
    {
        path: 'identify',
        loadChildren: './identify/identify.module#IdentifyModule'
    }
];

@NgModule({
    imports: [
        RouterModule.forRoot(routes, {useHash: true, enableTracing: DEBUG_INFO_ENABLED})
    ],
    exports: [
        RouterModule
    ]
})
export class AppRoutingModule {
}

What is appening is that when I redirect to the identify route, it jumps directly to the QuestionnairesComponent, but I'd like to show first the IdentifyComponent and then route to the QuestionnaireComponent through a link.

cozmik05 cozmik05 · Accepted Answer · 2018-06-28T13:50:52

If you want the IdentifyComponent to show first, QuestionnairesComponent cannot be its child root...

Do this instead...

import {NgModule} from '@angular/core';
import {Routes, RouterModule} from '@angular/router';
import {IdentifyComponent} from './identify.component';

const routes: Routes = [
     {
        path: '',
        component: IdentifyComponent
     },
     {
       path: 'questionnaires',
       loadChildren: 'app/questionnaires/questionnaires.module#QuestionnairesModule'
      }
    ];

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

export class IdentifyRoutingModule {
}

Angular 5: How to routing nested lazy-loaded modules?

1 Answers