Angular 2+, lazy loading routes failing (no error)

Question

I'm trying to get my Angular routes to lazy load. I've got a working version in another app, and as far as I can tell have implemented it in an identical way - however it simply doesn't work. There's no errors, just an empty <router-outlet>.

Here's my app.module.ts. The SharedModule and EntityViewsModule contain shared components:

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    SharedModule,
    EntityViewsModule,
    FormsModule,
    HttpModule,
    routing,
    ...rxjs stuff...
  ],
  providers: [
    ...bunch of services...
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

routing is defined:

import { RouterModule, Route } from '@angular/router';
import { ModuleWithProviders, Component } from '@angular/core';

const routes: Route[] = [
  { path: '', pathMatch: 'full', redirectTo: 'home'},
  { loadChildren: 'app/frontScreen/frontScreen.module#FrontScreenModule', path: 'home' },
];

export const routing: ModuleWithProviders = RouterModule.forRoot(
  routes,
  {
    useHash: true
  }
);

and the module I'm trying to load:

@NgModule({
  imports: [
    CommonModule,
    EntityViewsModule,
    SharedModule
  ],
  declarations: [
    FrontScreenComponent
  ],
  bootstrap: [
    FrontScreenComponent
  ]
})
export class FrontScreenModule { }

It works fine with eager loading where I define component: FrontScreenComponent and manually import the FrontScreenModule. But fails silently with the above configuration.

One clue might be that the redirect isn't even working. Typing 'http://localhost:4200/#/' into the address bar does not redirect to 'http://localhost:4200/#/home' like I'd expect.

Load children only works to load child routes not the module it self you have to add your sub module into your main module and define child routes into sub module and call load children to load those routes and second thing you can only lazy load your root routes and then it will automatically lazy load your childs so no need to follow this for every module. — Babar Hussain
– Babar Hussain, Commented Apr 22, 2017 at 0:15
@Babar Bilal, wouldn't that import it eagerly, thus negating the need for lazy loading? — Joe
– Joe, Commented Apr 22, 2017 at 0:25
I don't think Load children only works for child routes. I currently have no child routes. Pretty sure I'm using it just as described in the docs: angular.io/docs/ts/latest/guide/… — Joe
– Joe, Commented Apr 22, 2017 at 0:28
Also worth noting: "In app.module.ts, remove the AdminModule import statement from the top of the file and remove the AdminModule from the Angular module's imports array.", so I don't want to add FrontScreenModule to app.modules at all. — Joe
– Joe, Commented Apr 22, 2017 at 0:29

Joe · Accepted Answer · 2017-04-24 09:20:38Z

1

Babar Bilal was totally correct, I did have to have to have 'child' (well, not really Angular child routes as defined in the docs), but the module you lazy load does need to have it's own routes defined, so:

@NgModule({
  imports: [
    CommonModule,
    EntityViewsModule,
    SharedModule
  ],
  declarations: [
    FrontScreenComponent
  ]
})
export class FrontScreenModule { }

With a kind of silly route (note, note child routes defined):

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

export const FrontScreenRoutes = RouterModule.forChild(routes);

But that route is imported as a child route to the main module.

answered Apr 24, 2017 at 9:20

Joe

7,0944 gold badges57 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular 2+, lazy loading routes failing (no error)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related