Angular Routing : After lazy loading , page is redirecting to default route

Question

I have two modules in my angular 6 application one is app module and another one is User module, I am trying to implement lazy loading of the user module. Routing works if I manually hit the URL then the correct page from user module is getting displayed. But when I tried to navigate from header component it's not navigating to user page instead it's going to the default page.

Header.html

<form class="form-inline my-2 my-lg-0">
      <button class="btn btn-secondary my-2 my-sm-0" type="submit" routerLink="/user/login">Login</button>
      <button class="btn btn-secondary my-2 my-sm-0" type="submit" routerLink="/user/register">Register</button>
    </form>

app-routing-module

import { NgModule, Component } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { WelcomeComponent } from './components/welcome/welcome.component';
import { PagenotfoundComponent } from './components/pagenotfound/pagenotfound.component';

const routes: Routes = [
  {
    path:'welcome',
    component:WelcomeComponent
  },
  {
    path:'user',
    loadChildren:'./user/user.module#UserModule'
  },
  {
    path: '', 
    redirectTo: 'welcome', 
    pathMatch: 'full' },
  { 
    path: '**', 
    component: PagenotfoundComponent 
  }
];

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

User routing module

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './components/login/login.component';
import { RegisterComponent } from './components/register/register.component';

const routes: Routes = [
  {
    path:'login',
    component: LoginComponent
  },
  {
    path:'register',
    component:RegisterComponent
  },
  {
    path:'',
    redirectTo:'login',
    pathMatch:'full'
  }
];

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

App module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './components/header/header.component';
import { FooterComponent } from './components/footer/footer.component';
import { WelcomeComponent } from './components/welcome/welcome.component';
import { PagenotfoundComponent } from './components/pagenotfound/pagenotfound.component';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent,
    WelcomeComponent,
    PagenotfoundComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

So when I click on the login button, I can see the login page but immediately it is redirecting to welcome page (http://localhost:4200/welcome)

Can you try changing ``` path: '', redirectTo: 'welcome'``` to path: '', redirectTo: 'login'.. Not sure is this is what you want.. — Maniraj Murugan
– Maniraj Murugan, Commented Nov 24, 2018 at 6:07
No changing to login won't work. because loginComponent is part of another module — Deepu Nair
– Deepu Nair, Commented Nov 24, 2018 at 6:16
@DeepuNair can you create a stackblitz example reproducing this issue ? — CruelEngine
– CruelEngine, Commented Nov 24, 2018 at 7:00

Rahul · Accepted Answer · 2018-12-02 17:56:30Z

4

I think you just mapped your router-outlet in the wrong component - please check that

I have tried your same scenario in stackblitz please have a look

app.component.html

<form class="form-inline my-2 my-lg-0">
      <button class="btn btn-secondary my-2 my-sm-0" type="submit" routerLink="/user/login">Login</button>
      <button class="btn btn-secondary my-2 my-sm-0" type="submit" routerLink="/user/register">Register</button>
    </form>

<router-outlet></router-outlet>

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { RouterModule, Routes} from '@angular/router';
import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';

const routes: Routes = [
  {
    path:'welcome',
    component:HelloComponent
  },
  {
    path:'user',
    loadChildren:'./modules/lazy/lazy.module#LazyModule'
  },
  {
    path: '', 
    redirectTo: 'welcome', 
    pathMatch: 'full' 
  }

];

@NgModule({
  imports:      [ BrowserModule, FormsModule, RouterModule.forRoot(routes) ],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Everything worked as expected - please have a look to the link above - hope this helps you - Happy coding :)

Update

Finally it took much time to find the issue and solve it - but the issue seems to be tiny enough to eat our time :) - Yep the issue was a button tag with type as submit and that too wrapped inside a form tag - This cause the issue and makes the page to reload as it assumes that a form as been submitted and it renders the app component back

So first fix is in your header.component.html either remove your form tag or change your button type as type="button" if not change it to an anchor tag

<form class="form-inline my-2 my-lg-0">
        <button class="btn btn-secondary my-2 my-sm-0" type="button" [routerLink]="['user']">Login</button>
        <button class="btn btn-secondary my-2 my-sm-0" type="button" routerLink="/user/register">Register</button>
      </form>

This will solve your issue completely - rest are the fixes need to be done based on your convenience

app-routing.module.ts

Don't bootstrap over here your bootstrap should only be on the app.module so your routing @NgModule() should be like this

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

user-routing.module.ts

You need to export your RouteModule and read it from your LazyModule so your routing @NgModule() should be like this

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

That's all needed to fix everything and your code works perfectly - just feel free to share you concerns - cheers Happy coding :)

edited Dec 2, 2018 at 17:56

answered Nov 24, 2018 at 7:09

Rahul

2,1382 gold badges14 silver badges30 bronze badges

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

4 Comments

Deepu Nair Over a year ago

Thanks. I will try and let you know soon.

Deepu Nair Over a year ago

I am getting error, I checked your code i have almost same code but still navigation is not working . I tried to add code to stackblitz but getting some errorr So i pushed code my github account I know its too much of an ask but if you can have look at my repo that would be great.github.com/deepu105045/boyka

Deepu Nair Over a year ago

Thank you so much it just worked. That was a good lesson to learn.

Rahul Over a year ago

No issues happy coding :)

Collectives™ on Stack Overflow

Angular Routing : After lazy loading , page is redirecting to default route

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related