CODEWITHSUNDEEP
angulartypescriptlazy-loadingangular2-routing
Chrillewoodz
Chrillewoodz

Reputation: 28338

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?

Upvotes: 0

Views: 10944

Answers (2)

Meligy
Meligy

Reputation: 36594

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

Upvotes: 3

Alexander Ciesielski
Alexander Ciesielski

Reputation: 10834

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 {}

Upvotes: 2

Related Questions