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












0















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)










share|improve this question

























  • can you share your app.module

    – Chellappan
    Nov 24 '18 at 5:19











  • App module updated above. thanks.

    – Deepu Nair
    Nov 24 '18 at 5:54











  • Can you try changing ``` path: '', redirectTo: 'welcome'``` to path: '', redirectTo: 'login'.. Not sure is this is what you want..

    – Hello World
    Nov 24 '18 at 6:07













  • No changing to login won't work. because loginComponent is part of another module

    – Deepu Nair
    Nov 24 '18 at 6:16











  • @DeepuNair can you create a stackblitz example reproducing this issue ?

    – CruelEngine
    Nov 24 '18 at 7:00
















0















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)










share|improve this question

























  • can you share your app.module

    – Chellappan
    Nov 24 '18 at 5:19











  • App module updated above. thanks.

    – Deepu Nair
    Nov 24 '18 at 5:54











  • Can you try changing ``` path: '', redirectTo: 'welcome'``` to path: '', redirectTo: 'login'.. Not sure is this is what you want..

    – Hello World
    Nov 24 '18 at 6:07













  • No changing to login won't work. because loginComponent is part of another module

    – Deepu Nair
    Nov 24 '18 at 6:16











  • @DeepuNair can you create a stackblitz example reproducing this issue ?

    – CruelEngine
    Nov 24 '18 at 7:00














0












0








0








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)










share|improve this 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)







angular angular-ui-router






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 24 '18 at 5:54







Deepu Nair

















asked Nov 24 '18 at 4:30









Deepu NairDeepu Nair

459




459













  • can you share your app.module

    – Chellappan
    Nov 24 '18 at 5:19











  • App module updated above. thanks.

    – Deepu Nair
    Nov 24 '18 at 5:54











  • Can you try changing ``` path: '', redirectTo: 'welcome'``` to path: '', redirectTo: 'login'.. Not sure is this is what you want..

    – Hello World
    Nov 24 '18 at 6:07













  • No changing to login won't work. because loginComponent is part of another module

    – Deepu Nair
    Nov 24 '18 at 6:16











  • @DeepuNair can you create a stackblitz example reproducing this issue ?

    – CruelEngine
    Nov 24 '18 at 7:00



















  • can you share your app.module

    – Chellappan
    Nov 24 '18 at 5:19











  • App module updated above. thanks.

    – Deepu Nair
    Nov 24 '18 at 5:54











  • Can you try changing ``` path: '', redirectTo: 'welcome'``` to path: '', redirectTo: 'login'.. Not sure is this is what you want..

    – Hello World
    Nov 24 '18 at 6:07













  • No changing to login won't work. because loginComponent is part of another module

    – Deepu Nair
    Nov 24 '18 at 6:16











  • @DeepuNair can you create a stackblitz example reproducing this issue ?

    – CruelEngine
    Nov 24 '18 at 7:00

















can you share your app.module

– Chellappan
Nov 24 '18 at 5:19





can you share your app.module

– Chellappan
Nov 24 '18 at 5:19













App module updated above. thanks.

– Deepu Nair
Nov 24 '18 at 5:54





App module updated above. thanks.

– Deepu Nair
Nov 24 '18 at 5:54













Can you try changing ``` path: '', redirectTo: 'welcome'``` to path: '', redirectTo: 'login'.. Not sure is this is what you want..

– Hello World
Nov 24 '18 at 6:07







Can you try changing ``` path: '', redirectTo: 'welcome'``` to path: '', redirectTo: 'login'.. Not sure is this is what you want..

– Hello World
Nov 24 '18 at 6:07















No changing to login won't work. because loginComponent is part of another module

– Deepu Nair
Nov 24 '18 at 6:16





No changing to login won't work. because loginComponent is part of another module

– Deepu Nair
Nov 24 '18 at 6:16













@DeepuNair can you create a stackblitz example reproducing this issue ?

– CruelEngine
Nov 24 '18 at 7:00





@DeepuNair can you create a stackblitz example reproducing this issue ?

– CruelEngine
Nov 24 '18 at 7:00












1 Answer
1






active

oldest

votes


















2














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 :)






share|improve this answer


























  • Thanks. I will try and let you know soon.

    – Deepu Nair
    Nov 27 '18 at 17:57











  • 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
    Dec 2 '18 at 16:33











  • stackblitz.com/edit/angular-5gdqrr

    – Deepu Nair
    Dec 2 '18 at 16:39











  • Oh man. i have edited my answer please check :)

    – Rahul
    Dec 2 '18 at 17:57











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

    – Deepu Nair
    Dec 3 '18 at 15:10











Your Answer






StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














draft saved

draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53455140%2fangular-routing-after-lazy-loading-page-is-redirecting-to-default-route%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown

























1 Answer
1






active

oldest

votes








1 Answer
1






active

oldest

votes









active

oldest

votes






active

oldest

votes









2














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 :)






share|improve this answer


























  • Thanks. I will try and let you know soon.

    – Deepu Nair
    Nov 27 '18 at 17:57











  • 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
    Dec 2 '18 at 16:33











  • stackblitz.com/edit/angular-5gdqrr

    – Deepu Nair
    Dec 2 '18 at 16:39











  • Oh man. i have edited my answer please check :)

    – Rahul
    Dec 2 '18 at 17:57











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

    – Deepu Nair
    Dec 3 '18 at 15:10
















2














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 :)






share|improve this answer


























  • Thanks. I will try and let you know soon.

    – Deepu Nair
    Nov 27 '18 at 17:57











  • 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
    Dec 2 '18 at 16:33











  • stackblitz.com/edit/angular-5gdqrr

    – Deepu Nair
    Dec 2 '18 at 16:39











  • Oh man. i have edited my answer please check :)

    – Rahul
    Dec 2 '18 at 17:57











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

    – Deepu Nair
    Dec 3 '18 at 15:10














2












2








2







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 :)






share|improve this answer















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 :)







share|improve this answer














share|improve this answer



share|improve this answer








edited Dec 2 '18 at 17:56

























answered Nov 24 '18 at 7:09









RahulRahul

1,0231315




1,0231315













  • Thanks. I will try and let you know soon.

    – Deepu Nair
    Nov 27 '18 at 17:57











  • 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
    Dec 2 '18 at 16:33











  • stackblitz.com/edit/angular-5gdqrr

    – Deepu Nair
    Dec 2 '18 at 16:39











  • Oh man. i have edited my answer please check :)

    – Rahul
    Dec 2 '18 at 17:57











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

    – Deepu Nair
    Dec 3 '18 at 15:10



















  • Thanks. I will try and let you know soon.

    – Deepu Nair
    Nov 27 '18 at 17:57











  • 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
    Dec 2 '18 at 16:33











  • stackblitz.com/edit/angular-5gdqrr

    – Deepu Nair
    Dec 2 '18 at 16:39











  • Oh man. i have edited my answer please check :)

    – Rahul
    Dec 2 '18 at 17:57











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

    – Deepu Nair
    Dec 3 '18 at 15:10

















Thanks. I will try and let you know soon.

– Deepu Nair
Nov 27 '18 at 17:57





Thanks. I will try and let you know soon.

– Deepu Nair
Nov 27 '18 at 17:57













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
Dec 2 '18 at 16:33





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
Dec 2 '18 at 16:33













stackblitz.com/edit/angular-5gdqrr

– Deepu Nair
Dec 2 '18 at 16:39





stackblitz.com/edit/angular-5gdqrr

– Deepu Nair
Dec 2 '18 at 16:39













Oh man. i have edited my answer please check :)

– Rahul
Dec 2 '18 at 17:57





Oh man. i have edited my answer please check :)

– Rahul
Dec 2 '18 at 17:57













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

– Deepu Nair
Dec 3 '18 at 15:10





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

– Deepu Nair
Dec 3 '18 at 15:10


















draft saved

draft discarded




















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53455140%2fangular-routing-after-lazy-loading-page-is-redirecting-to-default-route%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







Popular posts from this blog

A CLEAN and SIMPLE way to add appendices to Table of Contents and bookmarks

Calculate evaluation metrics using cross_val_predict sklearn

Insert data from modal to MySQL (multiple modal on website)