Angular 2 module lazy-loading not working

Question

I'm trying to get my head around Angular 2 (RC5) lazy-loading of modules by building a basic structure of a site with two sections, welcome and backend (think login page and main site). I've set it up following the Angular 2 docs on feature modules, one for the welcome section and one for the backend. It correctly defaults to the welcome component but my button in the welcome component that's supposed to link to the 'backend' route goes to 'welcome/backend' instead. Typing in the url with just /backend goes to /backend/welcome. Here's my app.routing.ts file:

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

export const routes: Routes = [
  { path: '', redirectTo: 'welcome', pathMatch: 'full'},
  { path: 'backend', loadChildren: 'app/backend/backend.module' }
];

export const routing = RouterModule.forRoot(routes);

And my welcome.routing.ts:

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

import { WelcomeComponent } from './welcome.component';

export const routing = RouterModule.forChild([
    { path: 'welcome', component: WelcomeComponent}
]);

And my welcome.component.ts:

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

@Component({
    template: `
        <h2>Welcome</h2>
        <nav><a routerLink="backend">Login</a></nav>
    `
})
export class WelcomeComponent { }

Anyway, here's plunk of the whole app to make it easier Plunkr. The ones that matter are in welcome and backend folders. Clicking Login should show Backend with a Logout button which takes you back to the Welcome page.

Any suggestions would be appreciated.

dont you need a backend.route.ts and then route to your backend.component.ts? your example does not look like angular 2's example of lazy loading. angular.io/resources/live-examples/ngmodule/ts/plnkr.html — crh225
– crh225, Commented Aug 15, 2016 at 13:31
@crh225 Their use case is a bit different. They have a navigation in the app.component that is used to navigate to all the routes. I needed to link from within a feature module to another feature module. That was part of my confusion. And yes, part of the fix was to add a backend.route.ts. You can see all the code in my solution below. — Jason
– Jason, Commented Aug 16, 2016 at 0:43

crh225 · Accepted Answer · 2016-08-15 14:15:35Z

There were quite a few things wrong with your plunkr. Here is the working example https://plnkr.co/edit/QciaI8?p=preview

The router link was moved to app.component

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

@Component({
    selector: 'my-app',
    template: `
        <h1>Module Test</h1>
        <nav><a routerLink="../backend">Logins</a></nav>
        <router-outlet></router-outlet>
    `
})
export class AppComponent { }

You also need backend.routing.ts

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

import { BackendComponent }    from './backend.component';

const routes: Routes = [
  { path: '', redirectTo: 'backend', pathMatch: 'full'},
  { path: 'backend',    component: BackendComponent }
];

export const routing = RouterModule.forChild(routes);

Backend.module was changed to

import { NgModule }      from '@angular/core';
import { CommonModule }  from '@angular/common';
import { BackendComponent }  from './backend.component';
import { routing }            from './backend.routing';

@NgModule({
    imports:      [  routing ],
  declarations: [ BackendComponent ]
})
export default class BackendModule { }

Thanks for your info crh225. Unfortunately, moving the login button to app.component.ts doesn't meet my requirements and the route for the backend ended up behaving funny. Your code did lead me to the correct solution which I've added as an answer. The key is to have a route with an empty path in backend.routing. { path: '', component: BackendComponent } Router seems to stack routes from module to module (e.g. 'backend' route in app.routing and 'backend' in backend.routing results in '/backend/backend' as the url).

Jason · Accepted Answer · 2016-08-16 00:38:16Z

I finally go it working by figuring out that router stacks routes from nested modules (e.g. 'backend' route in app.routing and 'backend' in backend.routing results in '/backend/backend' as the url). So the solution was to have a backend.routing.ts with a single route of { path: '', component: BackendComponent }. It was also necessary to add a / to the routerLink values (e.g. /backend instead of backend). Here's my final backend.routing.ts:

import { Routes, RouterModule }  from '@angular/router';
import { BackendComponent }    from './backend.component';

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

export const routing = RouterModule.forChild(routes);

And backend.module.ts:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BackendComponent } from './backend.component';
import { routing } from './backend.routing';

@NgModule({
    imports: [ routing ],
    declarations: [ BackendComponent ]
})
export default class BackendModule { }

welcome.component.ts:

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

@Component({
    template: `
        <h2>Welcome</h2>
        <nav><a routerLink="backend">Login</a></nav>
    `
})
export class WelcomeComponent { }

backend.component.ts

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

@Component({
    template: `
        <h2>Backend</h2>
        <nav><a routerLink="welcome">Logout</a></nav>
    `
})
export class BackendComponent { }

This resulted in the login button taking me to /backend and the logout button taking me to /welcome as expected. Here's a link to the plunk: Plunker

Collectives™ on Stack Overflow

Angular 2 module lazy-loading not working

2 Answers 2

1 Comment

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Related