Lazy Load to route other than empty route in Angular 2

Question

I have my app-routing.module.ts as follow:


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

    const routes: Routes = [
        {
            path        : 'reset', 
            loadChildren: 'app/auth/reset-password-form/reset-password-form.module#ResetPasswordFormModule'
        },
        {
            path        : 'verify',
            loadChildren: 'app/auth/verify-user-form/verify-user-form.module#VerifyUserFormModule'
        },
        {
            path        : '404',
            loadChildren: 'app/route-not-found/route-not-found.module#RouteNotFoundModule'
        },
        {
            path        : '',
            pathMatch   : 'full',
            loadChildren: 'app/landing-page/landing-page.module#LandingPageModule'
        },
        {
            path      : '**',
            redirectTo: '/404'
        },

    ];

    @NgModule({
        imports: [RouterModule.forRoot(routes)],
        exports: [RouterModule]
    })
    export class AppRoutingModule {
    }

When I navigate to the localhost:4200, it will load the landing-page.module properly, however, when I entered localhost:4200/reset or localhost:4200/verify or localhost:4200/404, it will not load the relevant module, instead, it loaded landing-page.module automatically.

How can I solve this problem?

Still have the problem? Your problem is the order of routes, in first place you must set the '' path, in the last place you must set the '**' — Kalamarico
I have a similar problem where lazy loaded route goes to a different lazy loaded module...I get equivalent to your "verify" module being mistakenly loaded in response to "reset" path — user292701

Neeraj Goswami Neeraj Goswami · Accepted Answer · 2018-03-27T07:29:17

You have to add Routes to your childmodule

  const routes: Routes = [
  { path: '', component: ResetComponent}
  ];
  const ROUTES: ModuleWithProviders = 
  RouterModule.forChild(routes);

and import ROUTES in child module(ResetModule)

@NgModule({
 imports: [
    CommonModule,
    ROUTES,
    ],
 declarations: [ResetComponent],
 exports: [ResetComponent]
})

Lazy Load to route other than empty route in Angular 2

2 Answers