Angular Lazy Loading with Dependent Modules

Question

I am in processing of converting an Angular application to lazy loading. There are multiple modules which are dependent on each other.

Initially we imported all the modules in the app.module.ts (which loads all the module on login page) but now we have lazy loaded it and introduced a Secure modules which loads after successful login. We have also lazy loaded sub modules on Secure module (Routing config can be seen in code below).

We have routing like this:

/secure/dashboard (dashboard is lazy-loaded on Secure module and Secure is lazy loaded on App module)
/secure/user (user is lazy-loaded on Secure module)
/secure/user/edit (edit is in routing of User module)

There is multiple cases in our application that Dashboard module need to imports User module (this scenario). Due to which Dashboard load user-routing to its routing config eg.

/secure/dashboard/edit (this edit component is imported from User module) - The issue

What I am trying to achieve is, I include User module in Dashboard but not User routes.

I have reproduced this issue in this demo application, here: https://stackblitz.com/edit/deep-lazyloading-routes

app-routing.module.ts

const routes: Routes = [
  { path: 'secure', loadChildren: './secure/secure.module#SecureModule' }
];

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

secure-routing.module.ts

const routes: Routes = [
  {
    path: '',
    component: SecureComponent,
    children: [
      { path: 'dashboard', loadChildren: '../dashboard/dashboard.module#DashboardModule' },
      { path: 'user', loadChildren: '../user/user.module#UserModule' }
    ]
  }
];

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

dashboard-routing.module.ts

const routes: Routes = [
  { path: '', component: DashboardComponent }
];

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

user-routing.module.ts

const routes: Routes = [
  { path: '', component: UserComponent },
  { path: 'edit', component: UserEditComponent },
];

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

dashboard.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { DashboardRoutingModule } from './dashboard-routing.module';
import { DashboardComponent } from './dashboard.component';
import { UserModule } from '../user/user.module';

import { Router} from '@angular/router';

@NgModule({
  imports:      [ CommonModule, FormsModule, DashboardRoutingModule, **UserModule** ],
  declarations: [ DashboardComponent ],
})
export class DashboardModule {
  constructor(private router: Router) {
    console.log("Router Config:")
    console.log(this.router.config);
  }
}

Note: In this demo application, there is only Dashboard which is dependent on User while in our real application, dependencies are spread across the application.

soachishti soachishti · Accepted Answer · 2018-08-13T07:14:43

Routes are the integral part of any module. We cannot reference such module (with routing) in eagerly loaded module when lazy-loading. It is better to create a shared module and import that.

Angular Lazy Loading with Dependent Modules

1 Answers