Setting the default route with Angular lazy loaded modules

Question

I'm lazy loading modules with Angular, but if I navigate to the URL without providing a route path, e.g. http://localhost:4200 it loads my about.module when I'd expect the home.module to be loaded. Eagerly loading the modules works as expected.

Each module has a *-routing.module:

app-routing.module.ts

/* ... */

const routes: Routes = [
  {
    path: 'home',
    loadChildren: () => import('./modules/home/home.module').then(m => m.HomeModule)
  },
  {
    path: 'about',
    loadChildren: () => import('./modules/about/about.module').then(m => m.AboutModule)
  },
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    path: '**',
    redirectTo: 'page-not-found'
  }
];

@NgModule({
  imports: [
    RouterModule.forRoot(
      routes
      /* ... */
    )
  ],
  exports: [RouterModule]
})

/* ... */

home-routing.module.ts

/* ... */

const routes: Routes = [
  {
    path: '',
    component: HomeComponent,
    data: {
      title: 'Home'
    }
  }
];

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

/* ... */

about-routing.module.ts

/* ... */

const routes: Routes = [
  {
    path: '',
    component: AboutComponent,
    data: {
      title: 'About'
    }
  }
];

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

/* ... */

Other solutions I have tried and are for an older version of Angular don't seem to work:

• Unable to redirect to Lazy Loaded module as default route/url on server start up

I'm working with Angular 8+ in this case.

Answer 1

Very timely as I seem to be experiencing the same issue after upgrading to 8.1.3 from 7.2.5. After I updated pretty certain it was working just fine doing the redirect and after the last 12-24 hours something changed inadvertently to where I feel like I am crazy. If I got straight to /home no problem but localhost:4200 does not redirect but no errors nothing.

app.module.ts

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    RouterModule.forRoot([
      { path: '', redirectTo: 'home', pathMatch: 'full' },
      { path: 'home', loadChildren: () => import(`./shell/home/home.module`).then(m => m.HomeModule) }
    ]),

home.module.ts

import { HomeComponent } from './home.component';
import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { HomeRoutingModule } from './home-routing-module';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';

@NgModule({
  imports: [
    CommonModule,
    HomeRoutingModule
  ],
  declarations: [
      HomeComponent
  ],
  exports: [RouterModule],
  schemas: [ NO_ERRORS_SCHEMA ]
})
export class HomeModule { }

home-routing-module.ts

import { Routes } from '@angular/router';
import { RouterModule } from '@angular/router';

import { HomeComponent } from './home.component';
import { NgModule } from '@angular/core';

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

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

Answer 2

I have the same problem. 2 modules are loaded, on route change. On the frontpage, it also load the inventory module. Very anoying. It ruins the whole idea of lazy loading.

I am running Angular 8.2.14

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AdalGuard } from 'adal-angular4';

const AppRoutes: Routes = [
  {path: 'settings', loadChildren: () => import('./modules/settings/settings.module').then(m => m.SettingsModule), canActivate: [AdalGuard]},
  {path: '', loadChildren: () => import('./modules/my-workorders/my-workorders.module').then(m => m.MyWorkordersModule), canActivate: [AdalGuard]},
  {path: ':id', children: [
    {path: '', loadChildren: () => import('./modules/workorder-details/workorder-details.module').then(m => m.WorkorderDetailsModule), canActivate: [AdalGuard]},
    {path: 'inventory-management', loadChildren: () => import('./modules/inventory-management/inventory-management.module').then(m => m.InventoryManagementModule), canActivate: [AdalGuard]},
    {path: 'toolbox-talk', loadChildren: () => import('./modules/toolbox-talk/toolbox-talk.module').then(m => m.ToolboxTalkModule), canActivate: [AdalGuard]},
    {path: 'operations', loadChildren: () => import('./modules/operations/operations.module').then(m => m.OperationsModule), canActivate: [AdalGuard]},
    {path: 'work-permits', loadChildren: () => import('./modules/work-permits/work-permits.module').then(m => m.WorkPermitsModule), canActivate: [AdalGuard]},
    {path: 'object-list', loadChildren: () => import('./modules/object-list/object-list.module').then(m => m.ObjectListModule), canActivate: [AdalGuard]},
    {path: ':flid', loadChildren: () => import('./modules/history/history.module').then(m => m.HistoryModule), canActivate: [AdalGuard]}
  ]},

  { path: '**', redirectTo: '/', pathMatch: 'full' }
];

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