Chrillewoodz Chrillewoodz - 1 month ago 132
TypeScript Question

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

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?

Answer

Looking at my repo from my previous answer to you: http://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