Angular 2 how to define lazy loaded child routes of a parent route that's also lazy loaded

Question

I'm trying to get lazy loading to work for my app but it's one issue after another. I've gotten the main route to lazy load which is /admin, now I want to add another route which is /admin/login.

So I did this:

admin-router.module.ts

@NgModule({
  imports: [
    ComponentsModule,
    SharedModule,
    RouterModule.forChild([
      {
        path: '',
        component: AdminAreaComponent,
        children: [
          {
            path: 'login',
            loadChildren: 'app/+admin-area/pages/login/login.module#LoginModule'
          }
        ]
      }
    ])
  ],
  exports: [
    RouterModule
  ],
  declarations: [
    AdminAreaComponent
  ]
})
export class AdminAreaRouterModule {}

login-router.module.ts

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

// Global modules
import {ComponentsModule, SharedModule} from '../../shared';

// Components
import {LoginComponent} from '../login.component';

@NgModule({
  imports: [
    ComponentsModule,
    SharedModule,
    RouterModule.forChild([
      {
        path: '',
        component: LoginComponent
      }
    ])
  ],
  exports: [
    RouterModule
  ],
  declarations: [
    LoginComponent
  ]
})
export class LoginRouterModule {}

login.module.ts

import {NgModule} from '@angular/core';

import {ComponentsModule, SharedModule} from '../../../shared';
import {LoginComponent} from './login.component';
import {LoginRouterModule} from './router';

@NgModule({
  imports: [
    ComponentsModule,
    SharedModule,
    LoginRouterModule
  ],
  exports: [
    ComponentsModule,
    SharedModule,
    LoginRouterModule
  ]
})

export class LoginModule {}

The problem though is that as soon as I add the children part, /admin stops working all together, throwing the error Cannot match any routes. URL Segment: 'admin'.

Is this not how you define child routes of a lazy loaded route? How can I fix it?

score 3 · Accepted Answer · edited May 23 '17 at 12:17

Looking at my repo from my previous answer to you: https://stackoverflow.com/a/40121008/146656

In my sample it's lazy/deep, which matches admin/login for you.

First, I ran ng g module lazy/Deep --routing

Then, inside src/app/lazy/deep/deep-routing.module.ts, I modified routes to:

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

Then I added a <router-outlet> to the view of the main component in /lazy, so that content from /lazy/deep can be rendered inside it.

The important piece is how I modified the routing for lazy-routing.module.ts, to allow for lazy-loading the lazy/deep route:

export const routes: Routes = [
  {
    path: '',
    component: LazyComponent
  },
  {
    path: 'deep',
    // Loading by relative path didn't seem to work here
    // loadChildren: './deep/deep.module#DeepModule'
    loadChildren: 'app/lazy/deep/deep.module#DeepModule'
  }
];

If you are running ng watch / npm start or ng build --watch, you'll need to restart that in order to make it work.

See the full example in deep-lazy-loading branch in https://github.com/Meligy/routing-angular-cli/tree/deep-lazy-loading

I was using the wrong syntax for lazy loaded child routes, they should really add some info to the docs about this cuz it is far from obvious. Big thanks again. — Chrillewoodz, Oct 19 '16 at 06:45
Do you know how to solve this? http://stackoverflow.com/questions/40131110/how-to-render-a-grandchild-view-into-the-same-router-outlet-as-the-first-child — Chrillewoodz, Oct 20 '16 at 04:30
@Meligy have you tried if your example works with deep-linking, I mean as in *type/copy a link to a lazy nested route in browser address bar and press enter*? — superjos, Apr 13 '17 at 23:13

score 2 · Answer 2 · answered Oct 19 '16 at 06:34

2

You need to define an empty route within your LoginModule.

login.module.ts

@NgModule({
  imports: [
    RouterModule.forChild({ path: '', component: LoginComponent })
    ComponentsModule,
    SharedModule
  ],
  exports: [
    ComponentsModule,
    SharedModule
  ],
  declarations: [
    LoginComponent
  ]
})

export class LoginModule {}

answered Oct 19 '16 at 06:34

Alexander Ciesielski

10,506
5
45
66

Why do you export `RouterModule` in your modules? I'm pretty sure you shouldn't do that – Alexander Ciesielski Oct 19 '16 at 06:38
Please read the documentation on the Angular 2 router. There should be no such thing as a `LoginRouterModule`. The LoginModule is the only module you should have for login. Inside that, you should define the `RouterModule.forChild` – Alexander Ciesielski Oct 19 '16 at 06:40
If you read the styleguide you can see that you should have a router-module file for your routing instead of just throwing it inside the main module. Anyway I got it working now thanks to Meligy's example repo, turns out you can't use the `children` syntax with lazy loaded routes. Thanks for the pointer though :) – Chrillewoodz Oct 19 '16 at 06:44

Angular 2 how to define lazy loaded child routes of a parent route that's also lazy loaded

2 Answers2

Linked