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
– Kalamarico, Commented Jan 29, 2018 at 11:00
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
– user292701, Commented Mar 17, 2018 at 22:06

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

1

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]
})

answered Mar 27, 2018 at 7:29

Neeraj Goswami

1012 silver badges6 bronze badges

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

Comments

Ravi Shankar Bharti · Accepted Answer · 2019-03-12 10:28:50Z

1

This problem might happen because of the imports you have added in imports:[ ] of AppModule (or any other module file).

Make sure to remove all the lazily loaded modules from the imports array.

for eg: I have three modules named:HomeModule, ProfileModule and SettingsModule. if HomeModule is eagarly loaded and ProfileModule and SettingsModule are lazily loaded, then imports:[] of AppModule(app.module.ts) should look like this:

imports:[HomeModule] and it shouldn't include ProfileModule or SettingsModule because they will be loaded automatically during runtime.

edited Mar 12, 2019 at 10:28

Ravi Shankar Bharti

9,2786 gold badges31 silver badges53 bronze badges

answered Sep 24, 2018 at 13:16

Naresh

1,29113 silver badges26 bronze badges

Collectives™ on Stack Overflow

Lazy Load to route other than empty route in Angular 2

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related