Angular lazy loaded module failed to navigate to child routes

angular child module
lazy loading in angular 9
angular feature module routing
angular load module
angular lazy loading
lazy loaded module with child routes
angular module routing
angular dynamic module loading

I'm creating a dashboard app and so far I have two lazy loaded modules AuthModule and AdminModule My app-routing-module.ts looks like this

const routes: Routes = [
    {
     path: '',
     loadChildren: './auth/auth.module#AuthModule'
    },
    {
     path: 'admin',
     loadChildren: './admin/admin.module#AdminModule',
     canActivate: [AuthGuardService]
    },
    {
      path: '**',
      component: NotFoundComponent
    }
];

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

My app.component.html has a <router-outlet></router-outlet> that should render the above routes inside it.

so these urls are working /auth/ and /admin/ perfectly

In my admin-routing.module.ts I have the following routes

const routes: Routes = [
  {
    path: '',
    component: AdminComponent,
    children: [
      {path: '', pathMatch: 'full', redirectTo: 'dashboard'},
      {path: 'dashboard', component: DashboardComponent },
      {path: 'users', component: UsersComponent },
      {path: 'reports', component: ReportsComponent },
      {path: 'booking', component: BookingComponent }
    ]
  }
];

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

so that /admin/ route directly navigates to /admin/dashboard/ which is also working perfectly.

In my admin.component.html I added another <router-outlet></router-outlet> that should renders AdminModule routes inside it, so I can have a sidenav bar layout.

The problem is that only the default route for AdminModule which is /admin/dashboard renders perfectly inside the second router-outlet whenever I try to navigate to any other child route like /admin/users/ or /admin/booking/ the app redirects to NotFoundComponent

Here's my problem illustrated.

try this

{
  path: '',
  component: AdminComponent,
  children: [
    {path: '', pathMatch: 'full', redirectTo: 'dashboard'},
    {
      path: 'dashboard', 
      component: DashboardComponent,
      children: [
        {path: 'users', component: UsersComponent },
        {path: 'reports', component: ReportsComponent },
        {path: 'booking', component: BookingComponent }
      ]
    }
  ]
}

Angular lazy loaded module failed to navigate to child routes, I'm creating a dashboard app and so far I have two lazy loaded modules AuthModule and AdminModule My app-routing-module.ts looks like this const routes:  Lazy Loading Routes in Angular. With lazy loaded modules in Angular, it’s easy to have features loaded only when the user navigates to their routes for the first time. This can be a huge help for your app’s performance and reducing the initial bundle size. Plus, it’s pretty straightforward to setup! The following covers lazy loading modules in Angular 8+ apps.

Angular upgrade to version 7 lazy loaded module cannot be found , Jump to bottom If ivy is enabled it fails to resolve lazy loaded modules. Lazy loaded chunk not generated when lazy route is a child of  If the route is lazy loaded it will just sit on the callback route and will not navigate. If the route is eagerly loaded then it works. I refactored my feature module to load eagerly which solves the problem but the module is large and figured using best practices was to have it load only if a user was logged in.

I finally figured out the solution.

In your app.module file change the code to look like this:

   const routes: Routes = [
        {
         path: '',
         component: AuthComponent, //<--- Add this
         loadChildren: './auth/auth.module#AuthModule'
        },
        {
         path: 'admin',
         component: AdminComponent, //<--- Add this
         loadChildren: './admin/admin.module#AdminModule',
         canActivate: [AuthGuardService]
        },
        {
          path: '**',
          component: NotFoundComponent
        }
    ];

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

)

In your lazy-loaded module routing file (admin-routing.module.ts) change the code to look like this:

const routes: Routes = [

      {path: '', pathMatch: 'full', redirectTo: 'dashboard'},
      {path: 'dashboard', component: DashboardComponent },
      {path: 'users', component: UsersComponent },
      {path: 'reports', component: ReportsComponent },
      {path: 'booking', component: BookingComponent }

];

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

Now your code should work as expected

lazy loading not working in Angular 6 · Issue #10673 · angular , Jump to bottom path: '', component: MasterComponent, children: [ { path: '​dashboard', forRoot(routes)], exports: [RouterModule], providers: [] }) export class not build the chunk for the lazy loaded module and compilation fails with Angular upgrade to version 7 lazy loaded module cannot be found #  Because the new module is meant to be lazy-loaded, the command does NOT add a reference to the new feature module in the application's root module file, app.module.ts. Instead, it adds the declared route, customers to the routes array declared in the module provided as the --module option.

Routing & Navigation, Contains the first ActivatedRoute in the list of this route's child routes. children. Contains all the child An event triggered before the Router lazy loads a route configuration. An event triggered when navigation fails due to an unexpected error. Scroll The CanLoad guard (check before loading feature module assets). Lazy loading simply means loading a module and all it components, chunks etc. on demand. i.e Angular does not get to download all the files from the server until you request for it.

Lazy-loading feature modules, For large apps with lots of routes, consider lazy loading—a design pattern that loads NgModules as needed. with a custom nav so you can easily navigate to your modules in the browser: Every route in this routing module is a child route. To create nested routing, you need to create a routing submodule for the module you want to provide routing, you next need to define a parent route and its child routes and provide them to the router configuration via a forChild() method. Creating an Angular 9 Routing Module. Let's see this step by step.

Lazy Loading Routes in Angular ← Alligator.io, With lazy loaded modules in Angular, it's easy to have features loaded Lazy loaded routes need to be outside of the root app module, so you'll to navigate to /shop, /shop/checkout or /shop/confirm and the module will be  the cause for me was due to the fact that in app.module, I was importing a file from a barrel that was also exporting the module i was trying to lazy load. In all, make sure all the following are done: Remove lazy loaded module from any barrel files. Do not import lazy loaded module, using es6 import statement. Restart angular-cli app.

Comments
  • Doesn't this break the 'lazyness' -- by referencing AdminComponent in the root router, you must import AdminModule in your AppModule, therefore bundling it into the main.js?
  • @Charly No it does not. The admin module is it to be imported into the app module. Only import the Admin component. The admin component is part of the AppModule. But is children are lazy loaded.